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