Bootstrap是网站开发最受欢迎的框架之一，没有比它开发响应式网站项目效率最高。
随着Vuejs的越发流行，人们用它来控制页面元素，实现强大功能。而jQuery出现了一些落后，总结一下：
1、体积。jQuery将给页面增加30KB的尺寸；
2、如果你使用WebPack等打包工具时，如果有jQuery会比较麻烦；
3、当人们用Vue控制DOM时，就不想再用jQuery了。
如果我们用的是Vue，而且也用了Bootstrap框架，那还需要jQuery吗？
其实有一种选择就是：删除jQuery和Bootstrap的JS组件。
在Vue中，有一个很好的项目叫做vue-strap（https://github.com/yuche/vue-strap），它用Vue内置的插件替换了Bootstrap中的jQuery插件。所以，我们可以拥有Vue提供的所有Bootstrap组件，如模式窗口，轮播，标签，选项卡等。
比如你只是用Bootstrap的一些小组件，如果换成Vue.js定制插件是挺简单的事情，也不需要刚才说的vue-strap。
以下展示如何使用Vue.js从头配置一些常见的Bootstrap组件。
Tabs选项卡
先从选项卡开始。每个选项卡，都有一个附带的选项卡窗体。其显示/隐藏是通过active属性控制，在选项卡和相关窗体中添加或移除类来实现的。Vue.js这样处理：
Pane 1
Pane 2
我们使用tab变量来跟踪当前选择的选项卡，用active处理在选项目卡和窗体的添加或删除功能。
Pane 1
Pane 2
接下来是JavaScript：
new Vue({
el: '#tabs',
data: {
// Tab 1 is selected by default
tab: 1
}
});
[code]
为使这篇文章简洁，我们还可以做如下一些改进：
把JavaScript打包到Vue组件中，这样在整个网站都可以重复使用Tabs代码。
要想有真正紧凑的模板和超级快的呈现效果，需要将选项卡和选项卡窗体的内容放到数组数据属性中，并用v-for打印出选项卡以及选项卡窗体的列表项。
模式对话框
模式（也称为模态）对话框是我最喜欢的Bootstrap插件之一，它与Tabs类似，我们通过in 来控制打开或关闭按钮来显示或隐藏模式对话框。
[code]
v-bind:style="modalStyle">
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/258185.html