一文快速瞭解Github上最流行的Web框架——Vue.js入門
Vue 是一個專注於構建Web 用戶界面的JavaScript 庫。本文首先通過一段簡單的介紹讓你對Vue 有一個初步的認識，然後創建一個Web 應用。
為什麼需要這個前端框架
相對來說，Vue 在JavaScript 前端領域屬於後來者，但是對於當前主流JavaScript 庫的地位具有很大的威脅。它易用、靈活、速度快，還提供了許多功能和可選工具，這使得開發者能夠快速地構建一個現代Web 應用。Vue 的作者尤雨溪將其稱為漸進式框架。
■ Vue 遵循漸進增量的設計原則，其核心庫專注於用戶界面，使得現有的項目可以方便地集成使用Vue。
■ Vue 既可以構建出很小的原型，又可以構建出複雜的大型Web 應用。
■ Vue 非常容易上手——初學者能輕鬆掌握Vue，而已經熟悉Vue 的開發者則可以在實際項目中快速發揮出它的作用。
Vue 整體上遵循MVVM（Model-View-ViewModel，模型－視圖－視圖模型）架構，也就是說View（用戶界面或視圖）和Model（數據）是獨立的，ViewModel（Vue）是View 和Model交互的橋樑。Vue 對View 和Model 之間的更新操作做了自動化處理，並且已經為開發者進行了優化。因此，當View 的某個部分需要更新時，開發者並不需要特別指定，Vue 會選擇恰當的方法和時機進行更新。
Vue 還吸取了其他類似框架（如React、Angular 和Polymer）的精華。下面是對Vue 核心功能的概述。
■ 一個響應式的數據系統，能通過輕量級的虛擬DOM引擎和最少的優化工作來自動更新用戶界面。
■ 靈活的視圖聲明，包括優雅友好的HTML 模板、JSX（在JavaScript 中編寫HTML 的技術）以及hyperscript 渲染函數（完全使用JavaScript）。
■ 由可維護、可複用組件構成的組件化用戶界面。
■ 官方的組件庫提供了路由、狀態管理、腳手架以及更多高級功能，使Vue 成為了一個靈活且功能完善的前端框架。
這是一個有發展前景的項目
2013 年，尤雨溪開始籌劃構建Vue 的第一版原型。那時候尤雨溪任職於Google，並在工作中使用Angular。尤雨溪最初的目標是吸取Angular 中所有優秀的功能，比如數據綁定和數據驅動DOM，並摒棄會導致框架死板、難以學習和使用的一些功能。
Vue 於2014 年2 月首次公開亮相，並在第一天就大獲成功：出現在HackerNews 首頁，在Reddit 的/r/javascript 板塊中位居榜首，並且其官網獲得了1 萬次獨立訪問。
Vue 的第一個主要版本1.0 於2015 年10 月發佈。截至2015 年年底，Vue 在npm中的下載量飆升至38.2 萬次，在GitHub 上收穫了1.1 萬個star，其官網獲得了36.3 萬次獨立訪問。主流的PHP 框架Laravel 選用Vue 替代React 作為其官方的前端庫。
Vue 的第二個主要版本2.0 於2016 年9 月發佈，具有基於虛擬DOM 的全新渲染器以及許多新特性，比如服務端渲染和性能提升等。Vue 是目前速度最快的前端框架之一。根據與React 團隊共同得出的對比報告，Vue 的性能甚至優於React（https://cn.vuejs.org/v2/guide/comparison）。截至發文前，Vue 位居GitHub 流行前端框架第一位，有12.5萬個star，已超越React、Angular 。參見：https://github.com/collections/front-end-javascript-frameworks。
如今，有許多公司都在使用Vue，比如微軟、Adobe、阿里巴巴、百度、小米、Expedia、任天堂和GitLab。
兼容性要求
Vue 沒有任何第三方依賴，可以在所有兼容ECMAScript 5 的瀏覽器中使用。這也就是說它不支持Internet Explorer 8 及以下版本，因為Vue 使用了JavaScript 中相對較新的特性，比如Object.defineProperty，而它們在老版本的瀏覽器中是無法polyfill 的。
一分鐘設置
事不宜遲，下面我們通過快速設置來創建第一個Vue 應用。由於Vue 與生俱來的靈活性，只需要一個簡單的<script>標籤就能添加到任意Web 頁面中。下面創建一個包含Vue 庫的簡單Web 頁面，其中有一個簡單的div 元素和一個<script>標籤：
<html>
<head>
<meta charset="utf-8">
<title>Vue Project Guide setup</title>
</head>
<body>
<!-- 將庫添加到這裡 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 一些HTML 代碼 -->
<div id="root">
<p>Is this an Hello world?</p>
</div>
<!-- 一些JavaScript 代碼 -->
<script>
console.log('Yes! We are using Vue version', Vue.version)
</script>
</body>
</html>
在瀏覽器的控制檯中，可以看到類似如下的內容：
Yes! We are using Vue version 2.0.3
正如上面的代碼所示，庫對外提供了一個Vue 對象，該對象包含使用Vue 所需的所有功能。至此，一切就緒。
創建一個應用
現在，這個Web 頁面中還沒有運行Vue 應用。整個庫都是基於Vue 實例的，而實例是View和Model（數據）交互的橋樑。因此需要創建一個新的Vue 實例來啟動應用：
// 創建Vue 實例
var app = new Vue({
// 根DOM 元素的CSS 選擇器
el: '#root',
// 一些數據
data () {
return {
}
},
})
在上面的代碼中，使用關鍵字new 調用Vue 構造器創建了一個新的實例。Vue 構造器有一個參數—— option 對象。該參數可以攜帶多個屬性（稱為選項），這裡只使用其中的兩個屬性。
通過el 選項，我們使用CSS 選擇器告知Vue 將實例添加（掛載）到Web 頁面的哪個DOM元素中。在這個示例中，Vue 實例將使用<div id="root"> DOM元素作為其根元素。另外，也可以使用Vue 實例的$mount 方法替代el 選項：
var app = new Vue({
data () {
return {
message: 'Hello Vue.js!',
}
},
})
// 添加Vue 實例到頁面中
app.$mount('#root')
TIP：Vue 實例的大多數特殊方法和屬性都是以美元符號（$）開頭的。
我們還會在data 選項中初始化一些數據，利用了攜帶一個字符串的message 屬性。現在Vue 應用運行起來了，但是此處還並沒有做什麼。
在單個Web 頁面中，開發者可以添加任意多個Vue 應用。只需要為每個應用創建出新的Vue 實例並掛載到不同的DOM元素即可。當想要將Vue 集成到已有的項目中時，這非常方便。
Vue 開發者工具
Vue 有一個官方調試工具，在Chrome 中以擴展的方式呈現，名為Vue.js devtools。通過該工具可以看到應用的運行情況， 這有助於調試代碼。可以在Chrome 網上應用商店（https://chrome.google.com/webstore/search/vue）下載；如果使用Firefox，則可以到Firefox 附加組件（https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss）下載。
使用Chrome 版本的話，還需要進行額外的設置。在擴展設置中，啟用Allow access to fileURLs 選項，這樣調試工具就能在從本地磁盤打開的Web 頁面上檢測Vue 了。
打開我們的Web 頁面，按快捷鍵F12（在OS X 中快捷鍵是Shift + command + c）打開Chrome開發者工具，然後找到Vue 選項卡（有可能隱藏在More tools...下拉菜單中）。打開該選項卡之後，就可以看到一棵默認名為Root 的Vue 實例樹。如果點擊Root 的話，會在側邊欄上顯示出實例的相關屬性。
TIP：可以將devtools 選項卡拖放到喜歡的位置。建議將其放在靠前的位置，因為當Vue 不處於開發模式或沒有運行時，該選項卡在頁面中是隱藏起來的。
可以通過name 選項修改Vue 實例的名字：
var app = new Vue({
name: 'MyApp',
// ...
})
當一個頁面中有多個Vue 實例時，這有助於直觀地在開發者工具中找到具體的某個實例。
藉助模板實現DOM 的動態性
在Vue 中，開發者可採用多種方式編寫View。現在，我們先從模板開始。模板是描述View最簡單的方法，因為它看起來很像HTML，並且只需要少量額外的語法就能輕鬆實現DOM的動態更新。
文本顯示
先來看看模板的第一個功能：文本插值。文本插值用於在Web 頁面中顯示動態的文本。文本插值的語法是在雙花括號內包含單個任意類型的JavaScript 表達式。當Vue 處理模板時，該JavaScript 表達式的結果將會替換掉雙花括號標籤。用下面的代碼替換掉<div id="root">元素：
<div id="root">
<p>{{ message }}</p>
</div>
在上面的模板中，有一個<p>元素。該元素的內容是JavaScript 表達式message 的結果。該表達式將返回Vue 實例中message 屬性的值。現在應該可以在Web 頁面中看到輸出了一行新的文本內容：Hello Vue.js!。這看起來只是顯示了一個字符串，但是Vue 已經為開發者做了很多事情——DOM和數據連通了。
為了證明這一點，我們打開瀏覽器控制檯並修改app.message 的值，然後按回車鍵：
app.message = 'Awesome!'
可以發現顯示的文本發生了改變。這背後的技術稱為數據綁定。也就是說每當數據有改變時，Vue 都能夠自動更新DOM，不需要開發者做任何事情。Vue 框架中包含一個非常強大且高效的響應式系統，能對所有的數據進行跟蹤，並且能在數據發生改變時按需自動更新View。所有這些操作都非常快。
利用指令添加基本的交互
接下來在我們的靜態應用中加入交互性吧。例如，允許用戶通過輸入文本修改頁面中顯示的內容。要達到這樣的交互效果，可以在模板中使用稱為指令的特殊HTML 屬性。
Vue 中所有的指令名都是帶v-前綴的，並遵循短橫線分隔式（kebab-case）語法。這意味著要用短橫線將單詞分開。HTML 屬性是不區分大小寫的（大寫或小寫都沒有任何問題）。
在此，需要使用的指令是v-model，它將<input>元素的值與message 數據屬性進行綁定。在模板裡面添加一個新的<input>元素，該元素帶有v-model="message"屬性：
<div id="root">
<p>{{ message }}</p>
<!-- 添加一個文本輸入框 -->
<input v-model="message" />
</div>
當input 值發生改變時，Vue 會自動更新message 屬性。你可以在input 中輸入一些內容，驗證文本內容是否會隨著輸入的變化而變化，以及開發者工具中值的變化：
Vue 提供了許多指令，開發者還可以自定義指令。
小結
本文首先快速設置了一個Web 頁面來著手使用Vue，然後編寫了一個示例應用。我們在頁面中創建並掛載了一個Vue 實例到DOM中，接著編寫模板實現了DOM 的動態性。在這個模板中，我們藉助文本插值用一個JavaScript 表達式來顯示文本內容。最後，通過v-model 指令將input元素綁定到數據屬性，給Web 頁面添加了一些交互。
——本文選自《Vue.js項目實戰》
如果大家想使用Vue 創建真正的Web 應用，請參考下面這本書。
本書由6個具體的項目構成。在學習每個項目時，作者帶領讀者親手構建一個實際的應用。這也就意味著，學完本書時，我們將擁有6個可以運行的Vue應用。
第 1 章 Vue開發入門
第 2 章 項目1：Markdown筆記本
第 3 章 項目2：城堡決鬥遊戲
第 4 章 高級項目設置
第 5 章 項目3：支持中心
第 6 章 項目4：博客地圖
第 7 章 項目5：在線商店以及擴展
第 8 章 項目6：使用Meteor開發實時儀表盤
點擊【瞭解更多】跳轉到京東購買圖書
相關推薦
