利用纯Vue.js构建Bootstrap组件

没有jQuery, bootstrap.js, 或不需要任何第三方插件。

This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

Vue.js (required ^0.12, test with 0.12.10).
Bootstrap CSS (required 3.x.x, test with 3.3.5). VueStrap doesn't depend on a very precise version of Bootstrap. Just pull the latest.

CommonJS

$ npm install vue-strap

var alert = require('vue-strap/src/alert');
// or
var alert = require('vue-strap').alert;

new Vue({
 components: {
 'alert': alert
 }
})

ES6

$ npm install vue-strap

import alert from 'vue-strap/src/alert'
// or
import { alert } from 'vue-strap'

new Vue({
 components: {
 alert
 }``
})

AMD

$ bower install vue-strap

define(['vue-strap'], function(VueStrap) { var alert = VueStrap.alert; ... });

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

    Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站. 但是自从我向网页添加动态功能的工具变成vue.js后.适应bootstrap变得困难起来.因为这带来了一些技术包袱.没错.我说的就是jquery. 这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点: 增加开销.jQuery将会使你的网页增加30KB. 在使用诸如webpack一类的打包工具时,jquery也会很难

  • Vue.js bootstrap前端实现分页和排序

    Vue.js bootstrap前端实现分页和排序

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效

  • 使用Bootstrap + Vue.js实现添加删除数据示例

    使用Bootstrap + Vue.js实现添加删除数据示例

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="

  • Vue.js结合bootstrap实现分页控件

    Vue.js结合bootstrap实现分页控件

    本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit

  • bootstrap vue.js实现tab效果

    bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

  • 利用纯Vue.js构建Bootstrap组件

    没有jQuery, bootstrap.js, 或不需要任何第三方插件. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: Vue.js

  • webpack+vue.js构建前端工程化的详细教程

    本篇主要介绍三块知识点: node.js ,vue.js,webpack前端工程化 ,希望对您能有所帮助. 本文来自于csdn,由火龙果软件Alice编辑推荐. node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来.我们之前所熟知的javascript都是运行在前端浏览器,我们编写好了javascript代码后,由浏览器解释执行.而node.js,可以让我们编写javascript,然后在后端运行起来.现在的javascript和java.pyt

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • Vue.js 图标选择组件实践详解

    本文介绍了Vue.js 图标选择组件实践详解,分享给大家,具体如下: 背景 最近项目中在做一个自定义菜单需求,其中有一个为菜单设置小图标的功能,就是大家常见的左侧菜单 设置图标不难,方案就是字体图标,可供使用的图标库也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,问题在于如何优雅的提供几百个图标供用户选择,而不需要开发去一个一个的写标签,也不需要一个个的去找图标. 字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 <i class="

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • Vue.js中NaiveUI组件文字渐变的实现

    Vue.js中NaiveUI组件文字渐变的实现

    目录 前言 渐变文字 封装渐变组件 定义props 实现组件效果 前言 NaiveUI中有着一个非常有意思的组件,就是渐变文字组件,如下图: 有意思的点是这段文字描述这个东西看起来没啥用,实际上确实没啥用. 这里我们用Vue3.2+TS来实现这个简单的小组件. 渐变文字 渐变文字的实现比较简单,利用background-clip属性就可以实现,该属性存在一个text属性值,它可以将背景作为文字的前景色,配合渐变就可以实现渐变文字了, 示例代码如下: <span class="ywz-gra

  • 一步步教你用Vue.js创建一个组件(附代码示例)

    目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

随机推荐