1　Vue.js是什麼

單獨來講，Vue.js被定義成一個用來開發Web介面的前端庫，是個非常輕量級的工具。Vue.js本身具有響應式程式設計和元件化的特點。

所謂響應式程式設計,即為保持狀態和檢視的同步，這個在大多數前端MV*（MVC/MVVM/MVW）框架，不管是早期的backbone.js還是現在AngularJS都對這一特性進行了實現（也稱之為資料繫結），但這幾者的實現方式和使用方式都不相同。相比而言，Vue.js使用起來更為簡單，也無需引入太多的新概念，宣告例項new Vue({ data : data })後自然對data裡面的資料進行了檢視上的繫結。修改data的資料，檢視中對應資料也會隨之更改。

Vue.js的元件化理念和ReactJS異曲同工——“一切都是元件”，可以將任意封裝好的程式碼註冊成標籤，例如：Vue.component('example', Example)，可以在模板中以的形式呼叫。如果元件抽象得合理，這在很大程度上能減少重複開發，而且配合Vue.js的周邊工具vue-loader，我們可以將一個元件的CSS、HTML和js都寫在一個檔案裡，做到模組化的開發。

除此之外，Vue.js也可以和一些周邊工具配合起來，例如vue-router和vue-resource，支援了路由和非同步請求，這樣就滿足了開發單頁面應用的基本條件。

2　為什麼要用Vue.js

相比較Angularjs和ReactJS，Vue.js一直以輕量級，易上手被稱道。MVVM的開發模式也使前端從原先的DOM操作中解放出來，我們不再需要在維護檢視和資料的統一上花大量的時間，只需要關注於data的變化，程式碼變得更加容易維護。雖然社群和外掛並沒有一些老牌的開源專案那麼豐富，但滿足日常的開發是沒有問題的。Vue.js 2.0也已經發布了beta版本，渲染層基於一個輕量級的 virtual-DOM 實現，在大多數場景下初始化渲染速度和記憶體消耗都提升了 2~4 倍。而阿里也開源了weex（可以理解成ReactJS-Native和ReacJS的關係），這也意味著Vue.js在移動端有了更多的可能性。

不過，對於為什麼要選擇使用一個框架，都需要建立在一定的專案基礎上。如果脫離實際專案情況我們來談某個框架的優劣，以及是否採用這種框架，我覺得是不夠嚴謹的。

作為新興的前端框架，Vue.js也拋棄了對IE8的支援，在移動端支援到Android 4.2+和iOS 7+。所以如果你在一家比較傳統，還需要支援IE6的公司的話，你或許就可以考慮其他的解決方案了（或者說服你的老闆）。另外，在傳統的前後端混合（通過後端模板引擎渲染）的專案中，Vue.js也會受到一定的限制，Vue例項只能和後端模板檔案混合在一起，獲取的資料也需要依賴於後端的渲染，這在處理一些JSON物件和陣列的時候會有些麻煩。

理想狀態下，我們能直接在前後端分離的新專案中使用Vue.js最合適。這能最大程度上發揮Vue.js的優勢和特性，熟悉後能極大的提升我們的開發效率以及程式碼的複用率。尤其是移動瀏覽器上，Vue.js壓縮後只有18KB，而且沒有其他的依賴。

3　Vue.js的Hello world

現在來看一下我們第一個Vue.js專案，按照傳統，我們來寫一個Hello World。

首先，引入Vue.js的方式有很多，你可以採用直接使用CDN，例如：

<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>

也可以透過NPM進行安裝：

npm install vue // 最新穩定版本

正確引入Vue.js之後，我們在HTML檔案中的內容為：

<div id="app">　<h1>{{message}}</h1></div>

應用的js如下：

var vm = new Vue({　el : '#app',　data: {　　message : 'Hello world, I am Vue.js'　}});

輸出結果為：

這種形式類似於前端模板引擎，我們把js中message值替換了HTML模板中{{message}}這部分。

不過，如果僅僅是這樣的例子，我相信你也不會有什麼興趣去使用Vue.js。根據上文對Vue.js的說明，我們繼續寫兩個有關於它特性的例子。

第一個特性是資料繫結，我們可以在執行上述例子的瀏覽器控制檯（console）環境中輸入vm.message = 'Hello Vue.js'，輸出結果就變為了Hello Vue.js。也就說明vm.message和檢視中的{{message}}是繫結的，我們無需手動去獲取<h1>標籤來修改裡面的innerHTML。

同樣，我們也可以繫結使用者輸入的資料，檢視會隨著使用者的輸入而變化，例如：

<div id="app">　<h1>Your input is {{ message }}</h1>　<input type=”text” v-model=”message”></div>

vm.message的值會隨著使用者在input中輸入的值的變化而變化，而無需我們手動去獲取DOM元素的值再同步到js中。

第二個特性是元件化，簡單來說我們可以自己定義HTML標籤，並在模板中使用它，例如：

<div id="app">　<message content='Hello World'></message></div>　<script type="text/javascript">　var Message = Vue.extend({　　props : ['content'],　　template : '<h1>{{content}}</h1>'　})　Vue.component('message', Message);　var vm = new Vue({　　el : '#app',　});</script>

我們在瀏覽器裡最終看到的HTML結果為：

可以看到自定義的標籤<message>被替換成了<h1>Hello World</h1>，當然，實際中的元件化遠比示例複雜，我們會給元件新增引數及方法，使之能更好地被複用。

如果說這幾個例子引起了你對Vue.js的興趣的話，那接下來就將它真實地運用到生產環境中吧。

本文節選自《Vue.js 前端開發 快速入門與專業應用》

內容簡介

本書主要介紹Vue.js的使用方法和在實際專案中的運用，它既可以在一個頁面中單獨使用，也可以將整站都構建成單頁面應用。為了便於理解，本書會從傳統的開發角度切入，先從資料渲染、事件繫結等方面介紹在Vue.js中的使用方法，然後漸進到Vue.js自身的特性，例如資料繫結、過濾器、指令以及最重要的元件部分。除了框架用法外，本書還介紹了和Vue.js相關的重要外掛和構建工具，這些工具有助於幫助使用者構建一個完整的單頁面應用，而不僅僅是停留在個人DEMO階段的試驗品。而對於複雜專案，Vue.js也提供了對應的狀態管理工具Vuex，降低專案的開發和維護成本。鑑於完稿前，Vue.js 2.0已正式釋出完畢，本書也在相關用法上對比了1.0和2.0的區別，並補充了render函式和服務端渲染等特性。

本書適用於尚未接觸過MVVM類前端框架的開發者，或者初步接觸Vue.js的開發者，以及實際應用Vue.js開發專案的開發者。