Bootstrap是网上最流行的前端开发框架. 除了用它，我不知道还有其他更快的方法去构建一个响应式的网站。
但是自从我向网页添加动态功能的工具变成vue.js后。适应bootstrap变得困难起来。因为这带来了一些技术包袱。没错。我说的就是jquery。
这并不是在抨击jquery，我只是意识到，当你已经在项目里使用一些像Vue的框架后，再引入jQuery就会出现一些显著的缺点：
增加开销。jQuery将会使你的网页增加30KB。
在使用诸如webpack一类的打包工具时，jquery也会很难与之进行配置。
当你使用Vue负责DOM操作时，你不会愿意Jquery再来将DOM搞的一团糟。
彻底移除jQuery和Bootstrap的javascript插件
这里有一个很棒的项目 vue-strap ，它使用Vue.js 内置的插件来替换Bootstrap中的Javascript插件。因此你可以使用你项目中原有的Bootstrap插件，比如 modals, carousel, tabs, etc. 他们都是基于 Vue 提供支持.
但是如果你只是用一小部分的Bootstrap插件的话, 我觉得自己定制Vue.js的插件也很容易，那样的话你也不需要将整个vue-strap都引用进来（译者注：我就是只用了Vue.js和几个其他需要的plugin :）
下面让我展示一下怎么使用vue，从零开始设置一些常用的Bootstrap 插件
自己动手做由vue.js驱动的Bootstrap小部件
选项卡
我们将从选项卡开始。每一个选项卡都附带着他的面板. 选项卡的显示/隐藏是通过添加/移除选项卡与面板的class属性中的active来实现的，而这就是Vue将要处理的工作。
Pane 1
Pane 2
我们用一个变量tab来跟踪当前被选中的选项卡，并用这个变量来添加/移除选项卡与其对应面板的Class属性中的active：
Pane 1
Pane 2
我们还需要在所有的选项卡上监听点击事件，用来更新我们的tab变量
Pane 1
Pane 2
最后，js代码:
new Vue({
el: '#tabs',
data: {
// Tab 1 is selected by default
tab: 1
}
});
这里还有一些我们可以进行的改进与优化，但为了使本文简介的缘故就不展开了：
将JavaScript代表包装成一个Vue组件，以便我们能在整个网站重用这个选项卡代码。
作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中，然后用 v-for来打印出选项卡与面板的列表来。
模态框
模态对话框是我最喜欢的Bootstrap 插件之一。与选项卡类似，我们通过添加/移除一个in的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发，
v-bind:style="modalStyle">
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/256303.html