書接上文，上一回我們們說到了如今的前端江湖早已是框架三分天下的格局。接下來，我們們就要說到主角 Vue 了。在說真正的 Vue 內容之前，我們們還要先來說說 Vue 與 MVVM 之間的那些事兒。
什麼是Vue
想要近距離了解什麼是 Vue，其實特別簡單。我們們只需要訪問 Vue的官方網站 就可以了。
映入眼簾的，我們們可以看到說 Vue 是漸進式 JavaScript 框架，英文叫做“Progressive JavaScript Framework”。當然，你現在並不需要知道什麼是漸進式 JavaScript 框架。
那麼接下來，我們們再進一步看看 Vue 的官方是如何來介紹自己的呢。
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
關於這個定義我們們不做過多的解釋了，因為就算解釋估計你現在也很難知道它在說個啥！如果你不滿足，那我們就再看一個 Vue 官方提供的視訊吧。
Vue的特點
根據 Vue 的官方提供的資訊，我們們可以看到 Vue 主要的特點集中在三點：
- 易用：只要你掌握了 HTML、CSS 和 JavaScript，就可以直接來學習 Vue 框架了。
- 靈活：Vue 提供一個核心庫，類似於 jQuery。依賴自身不斷繁榮的生態系統，類似於 jQuery 的外掛庫一樣，可以在一個庫和一套完整框架之間自如伸縮。
- 高效：核心庫檔案壓縮之後只有 20KB，遠比 jQuery 的壓縮版檔案小得多。並且還提供超快的虛擬 DOM。
總體來講，Vue 的官方就是告訴你，用我這個框架要求很低，會HTML、CSS 和 JavaScript 就可以了。而且，我這個框架的核心庫 Vue.js 檔案很小，你使用的時候不會對你現在的專案造成多大的影響。
褲襠裡著火，當然了！我們現在也沒用 Vue 來開發個網頁，所以它所謂的優勢對於我們們現階段來說只不過自說自話而已。是不是這個樣子，我們們還需要在具體的案例中體驗。
什麼是 MVVM
關於 Vue 我們們說了這麼多，接下來再來說說關於 MVVM 吧。MVVM 呢，其實是一種開發模式。當然，這麼說估計你也是一臉懵逼的。
心急吃不了熱豆腐，且聽我慢慢道來~
MVVM 其實表示的是 View-ViewModel-Model，就是檢視層-檢視模型層-模型層。View是作為檢視層，簡單來說可以把它理解為HTML頁面；Model 是作為模型層，它是負責處理業務邏輯以及和伺服器端進行互動的；ViewModel 是作為檢視模型層，也就是 Vue 框架所起到的作用了，主要是作為 View 層和 Model 層之間的通訊橋樑。
Vue 與 MVVM
說到這呢，可能你會產生個疑問，Vue 和 MVVM 之間是個什麼關係呢？
其實，Vue 框架就是一個典型的 MVVM 模型的框架。在解釋 MVVM 模式的時候，我們們也說了，Vue 框架其實就是起到 MVVM 模式中的 ViewModel 層的作用。
這麼說還是會比較抽象，接下來我們們用程式碼來進一步解釋 Vue 和 MVVM 之間的關係。
如果你使用過 jQuery 的話，那你對 DOM 操作、事件繫結一定不陌生啦！比如我們們現在通過 jQuery 來為指定的 DOM 新增一個 button 按鈕，併為它繫結 click 事件，具體的程式碼就像下面這樣：
if (showBtn) {
var btn = $('<button>點我點我點我</button>');
btn.on('click', function(){
console.log('你終於點中了我...');
});
$('#app').append(btn);
}
複製程式碼上面這段程式碼的邏輯並不複雜。但是這樣的程式碼最大的問題就是負責檢視的 HTML 程式碼和負責業務邏輯的 JavaScript 程式碼耦合在一起。隨著功能的不斷完善和增加，直接操作 DOM 會變得越來越麻煩。
像 Vue 這樣的 MVVM 框架將檢視層和模型層有效地分離開來，這樣你只需要關心資料就行啦！
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-if="showBtn" v-on:click="handleClick">點我點我點我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
showBtn: true
},
methods: {
handleClick: function(){
console.log('你終於點中了我...');
}
}
});
</script>
複製程式碼上面這段程式碼我們們會發現，負責檢視的 HTML 程式碼和負責業務邏輯的 JavaScript 程式碼有效地分離開來。之所以能做到這一點，主要是依靠 Vue 框架才得以實現的。
所以，Vue 框架就是充當了 MVVM 開發模式中的 ViewModel 層，負責 View 和 Model 之間通訊的橋樑。我們們在使用 Vue 框開發的時候，只需要關心 View 層的 HTML 程式碼和 Model 層的 JavaScript 邏輯就可以了。