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項目中使用他。
以上所述是本文的全部內容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對網站的支持！