Bootstrap是網(wǎng)上最流行的前端開發(fā)框架. 除了用它，我不知道還有其他更快的方法去構(gòu)建一個響應(yīng)式的網(wǎng)站。

但是自從我向網(wǎng)頁添加動態(tài)功能的工具變成vue.js后。適應(yīng)bootstrap變得困難起來。因為這帶來了一些技術(shù)包袱。沒錯。我說的就是jquery。

這并不是在抨擊jquery，我只是意識到，當(dāng)你已經(jīng)在項目里使用一些像Vue的框架后，再引入jQuery就會出現(xiàn)一些顯著的缺點：

增加開銷。jQuery將會使你的網(wǎng)頁增加30KB。

在使用諸如webpack一類的打包工具時，jquery也會很難與之進行配置。

當(dāng)你使用Vue負(fù)責(zé)DOM操作時，你不會愿意Jquery再來將DOM搞的一團糟。

徹底移除jQuery和Bootstrap的javascript插件

這里有一個很棒的項目 vue-strap ，它使用Vue.js 內(nèi)置的插件來替換Bootstrap中的Javascript插件。因此你可以使用你項目中原有的Bootstrap插件，比如 modals, carousel, tabs, etc. 他們都是基于 Vue 提供支持.

但是如果你只是用一小部分的Bootstrap插件的話, 我覺得自己定制Vue.js的插件也很容易，那樣的話你也不需要將整個vue-strap都引用進來（譯者注：我就是只用了Vue.js和幾個其他需要的plugin  :）

下面讓我展示一下怎么使用vue，從零開始設(shè)置一些常用的Bootstrap 插件

自己動手做由vue.js驅(qū)動的Bootstrap小部件

選項卡

我們將從選項卡開始。每一個選項卡都附帶著他的面板. 選項卡的顯示/隱藏是通過添加/移除選項卡與面板的class屬性中的active來實現(xiàn)的，而這就是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來跟蹤當(dāng)前被選中的選項卡，并用這個變量來添加/移除選項卡與其對應(yīng)面板的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>

我們還需要在所有的選項卡上監(jiān)聽點擊事件，用來更新我們的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>