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

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将要处理的工作。

<div id="tabs">
 <ul class="nav nav-tabs">
  <li><a>tab 1</a></li>
  <li><a>tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane">pane 1</div>
  <div class="tab-pane">pane 2</div>
 </div>
</div>

我们用一个变量tab来跟踪当前被选中的选项卡，并用这个变量来添加/移除选项卡与其对应面板的class属性中的active：

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}"><a>tab 1</a></li>
  <li v-bind:class="{ active: tab === 2}"><a>tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   pane 2</div>
 </div>
</div>

我们还需要在所有的选项卡上监听点击事件，用来更新我们的tab变量

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}" v-on:click="tab = 1">
   <a>tab 1</a>
  </li>
  <li v-bind:class="{ active: tab === 2}" v-on:click="tab = 2">
   <a>tab 2</a>
  </li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   pane 2</div>
 </div>
</div>

最后，js代码:

new vue({
 el: '#tabs',
 data: { 
  // tab 1 is selected by default
  tab: 1 
 }
});

这里还有一些我们可以进行的改进与优化，但为了使本文简介的缘故就不展开了：

将javascript代表包装成一个vue组件，以便我们能在整个网站重用这个选项卡代码。

作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中，然后用 v-for来打印出选项卡与面板的列表来。

模态框

 模态对话框是我最喜欢的bootstrap 插件之一。与选项卡类似，我们通过添加/移除一个in的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发，

<div id="app" v-bind:class=" { 'modal-open': show }">
 <button class="btn btn-primary" v-on:click="toggle">
  open
 </button>
 <div class="modal" tabindex="-1" v-bind:class="{ in: show }"
  v-bind:style="modalstyle">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body">
     <p>vue-powered modal!</p>
    </div>
   <div class="modal-footer">
    <button class="btn" v-on:click="toggle">close</button>
   </div>
  </div>
 </div>
 </div>
</div>

对于一个bootstrap 的模态框，我们需要在对话框上有一个动态的内联样式。 我们通过 v-bind:style 指令来实现，这个指令通过从一个计算属性中接收一个“对象样式”进行的。每次计算属性所依赖的变量变化时，他自己都会重新计算一遍:

new vue({
 el: '#app',
 data: { 
  show: false 
 },
 methods: {
  toggle() { this.show = !this.show; }
 },
 computed: {
  modalstyle() {
   return this.show ? 
    { 'padding-left': '0px;', display: 'block' } : {};
  }
 }
});

你也可以通过使用vue的过渡动画在模态框进入和离开dom时渐变，来增强你的模态框。

让jquery退休吧，考虑下在下一个bootstrap 项目中使用vue.js

不是说你可以在bootstrap中用vue.js代替jquery，而是说你的确应该这么做。因为不管你是使用vue-strap或自己封装插件，你都可以感到vue的如下诱人的优势：

与jquery对比，vue的dom操作系统允许较高的ui性能和响应性。

vue是被设计用来建立小型，孤立的ui块的。所以vue编写的小部件将比jquery的更容易扩展，可维护性更好。

bootstrap的小部件有着臭名昭著的混乱模板, 所以vue可以使用他灵活的模板选项来缓解这个问题，如jsx，单页应用组件，渲染功能，类与样式绑定，等等。

请记住,vue不支持ie8，但是你可能会考虑在下一个bootstrap项目中使用他。

以上所述是本文的全部内容，希望对大家有所帮助