Vue.js作為一個后起的前端框架，借鑒了Angular 、React等現(xiàn)代前端框架/庫的諸多特點，并且
取得了相當(dāng)不錯的成績。

Vue.js的定位是一個漸進(jìn)式框架，作者的說法是：

與其他框架的區(qū)別就是漸進(jìn)式的想法，也就是Progressive——這個詞在英文中定義是漸進(jìn)，
一步一步，不是說你必須一竿子把所有的東西都用上。

這或許是Vue.js受到越來越多關(guān)注的一個重要原因：你只需要具備基本的HTML/JavaScript/CSS
基礎(chǔ)，就可以快速上手，讓你用上這些現(xiàn)代Web開發(fā)中的先進(jìn)技術(shù)來提高你的生產(chǎn)力：

響應(yīng)式編程、聲明式渲染、組件化開發(fā)、虛擬DOM、跨平臺支持…

盡管Vue.js缺少令人眼前一亮的獨創(chuàng)性前端開發(fā)理念，但它集中實現(xiàn)了最近幾年前端領(lǐng)域技術(shù)
大躍進(jìn)的諸多新理念、新技術(shù)。或許你認(rèn)為這些創(chuàng)新起源于Angular、React或者Knockout，
但Vue.js可以無縫引導(dǎo)大量jQuery時代的前端工程師進(jìn)入新的時代，這也是一個相當(dāng)值得稱贊的
巨大的成果。

與Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）一己之力
完成。這或許部分解釋了漸進(jìn)式這一思路的來源：軟件的第一使用者是其作者。

因此Vue.js更適合個人或小型團(tuán)隊上手 —— 你沒有那么多的精力，一開始就考慮構(gòu)建工具鏈、
測試等諸多問題。你迫切需要的，是高效地生產(chǎn)出，你的用戶需要的產(chǎn)品或服務(wù)。

不過漸進(jìn)式意味著Vue.js沒有局限于小型應(yīng)用的開發(fā)：你一樣可以使用ES2015、使用構(gòu)建
工具鏈、使用集中狀態(tài)管理這些來開發(fā)大規(guī)模項目。只是，Vue.js允許你把這些東西的學(xué)習(xí)和應(yīng)用，
在稍晚一些的時候引入，而不是必須先學(xué)習(xí)很多新東西才能上手。

1.Hello Vue.js 2

和其他現(xiàn)代前端框架一樣，Vue.js也是以JavaScrip作為應(yīng)用的入口，HTML只是提供一個渲染
的錨點 —— 這便利于Vue.js遷移到瀏覽器之外的其他平臺，比如移動設(shè)備，或者服務(wù)器。

創(chuàng)建一個Vue.js的Hello World示例相當(dāng)簡單：

1、引入vue.js庫

<script src="lib/vue.js"></script>

這將暴露出一個全局類——Vue，你可以用它來創(chuàng)建一個Vue實例。

2、創(chuàng)建Vue實例

Vue是一個封裝了響應(yīng)式開發(fā)、模板編譯等諸多特性的基礎(chǔ)類，你通過提供一些
配置項，來創(chuàng)建一個實例：

var vm = new Vue({...});

一個常見的配置項是template，以類似HTML的語法來編制視圖的結(jié)構(gòu)：

var vm = new Vue({template: '<h1>Hello,Vue.js 2</h1>' })

3、渲染Vue實例

要將Vue實例渲染到HTML頁面中，采用Vue實例的$mount()方法，這個方法
的名稱，意味著渲染實際上是將Vue實例生成的（虛擬）DOM子樹，掛接到頁面DOM中。

容易理解，$mount()方法需要指定一個定位用的DOM節(jié)點———錨點：

vm.$mount(anchor_element);

Vue.js會將渲染出的DOM子樹，插入錨點元素之前（并最終刪除這個錨點元素）。

可以使用CSS選擇符或者指定一個HTMLElement來聲明錨點。例如，
下面的示例將Vue實例掛接到id為app的DOM對象處：

vm.$mount('#app');

2.使用隱式渲染

在前面的示例中，我們使用Vue實例的$mount()方法來顯式地啟動Vue實例
的渲染。

實際上，Vue.js也提供了一個實例化時的配置項el，來允許我們隱式地啟動
Vue實例的渲染。el用來聲明目標(biāo)渲染錨點，例如：

Vue({template: '<h1>Hello,Vue.js 2!</h1>',el: '#app' })

工作原理

如果Vue.js檢測到你指定了el配置項，將在內(nèi)部自動地執(zhí)行渲染 —— 這時你
不再需要額外調(diào)用$mount()方法了：

我們看到的大部分Vue.js示例代碼，通常都會采用這種隱式渲染的寫法。不過我認(rèn)為
在開始學(xué)習(xí)時，使用儀式感更強(qiáng)的$mount()方法，會讓你更多一點理解Vue.js
的設(shè)計思想。

3.使用HTML模板

在創(chuàng)建Vue實例時，如果聲明了el配置項，那么你也可以省略template
選項。這時候，Vue.js將提取錨點元素的HTML內(nèi)容，做為模板。

我們可以使用單一的el配置項來創(chuàng)建Vue實例：

var vm = new Vue({el:'#app'});

在Vue.js中，這種模板被稱為HTML模板，而使用template配置項
書寫的模板，被稱為字符串模板。

工作原理

當(dāng)Vue.js發(fā)現(xiàn)你提供的選項中沒有template屬性時，將提取el屬性所
指定的DOM節(jié)點的outerHTML內(nèi)容作為模板內(nèi)容。這類似于：

var vm = new Vue({el:'#app',template: document.querySelector('#app').outerHTML })

Vue.js支持使用HML模板，可能一方面源于早期AugularJS的影響，另一方面
可能在于，在HTML文件中書寫模板，還是比在JavaScript中寫字符串來的自然。

4.模型聲明與綁定

模板的存在的唯一目的，是為了和數(shù)據(jù)綁定。

Vue.js在標(biāo)準(zhǔn)HTML語法基礎(chǔ)上，增加了一些擴(kuò)展的語法來聲明數(shù)據(jù)的綁定。

數(shù)據(jù)綁定語法

在Vue.js的模板中，最常見的一種數(shù)據(jù)綁定語法，是使用模板引擎Mustache
的插值寫法：{{}}。例如，下面的模板綁定了實例上下文中的name變量：

<h1>{{name}}</h1>

當(dāng)Vue.js渲染此模板時，將使用實例數(shù)據(jù)上下文中的name變量值，來計算最終的
渲染結(jié)果。

數(shù)據(jù)模型聲明

在創(chuàng)建Vue實例時，使用data配置項來聲明Vue實例的數(shù)據(jù)模型。

例如，下面的示例創(chuàng)建了一個具有初始模型{name:'Elthon John'}的Vue實例：

var vm = new Vue({template:'<h1>{{name}}</h1>',data:{name:'Elton John'},el:'#app' })

Vue.js根據(jù)data配置項聲明的初始模型構(gòu)造數(shù)據(jù)上下文，進(jìn)而和template配置項
所聲明的模板執(zhí)行綁定，因此，上面示例的最終渲染結(jié)果是：<h1>Elton John</h1>。

5.模板的數(shù)據(jù)上下文

由于通常使用data配置項來聲明Vue實例的數(shù)據(jù)模型，這容易讓我們誤以為
只有在data對象上聲明的數(shù)據(jù)才可以與模板綁定。

當(dāng)然不是這樣，模板的數(shù)據(jù)上下文 = Vue實例對象。

當(dāng)Vue.js創(chuàng)建一個Vue實例時，它會將data配置項的每個根屬性，（經(jīng)過若干處理后）
添加為實例的根屬性。

因此，實際上我們可以在模板中綁定實例的任意屬性。例如：下面的模板可以輸出
$mount()方法的源代碼：

<pre>{{$mount}}</pre>

既然如此，我們?yōu)槭裁葱枰褂胐ata配置項來聲明數(shù)據(jù)模型，而不是直接
在實例上設(shè)置數(shù)據(jù)模型呢？例如，下面的代碼有什么問題呢？

var vm = new Vue({template:'<h1>{{name}}</h1>', }) vm.name = 'WHOAMI'; vm.$mount('#app');

這關(guān)乎Vue.js的一個核心特性 ———— 響應(yīng)式計算。

6.響應(yīng)式計算機(jī)制

響應(yīng)式計算是一種面向變化傳播的編程范式，響應(yīng)式計算模型主要包括
兩個部分：數(shù)據(jù)源和（依賴于數(shù)據(jù)源的）計算過程。當(dāng)數(shù)據(jù)源發(fā)生變化時，
將自動執(zhí)行計算過程（比如視圖的渲染過程）：

雖然響應(yīng)式計算本質(zhì)上是一種通用的編程范式，但這種模型最初就是為了簡化交互
式用戶界面的創(chuàng)建和實時系統(tǒng)動畫的繪制而提出來的一種方法，它使得我們只需要修改
數(shù)據(jù)源就可以自動更新用戶界面。

Vue.js內(nèi)部實現(xiàn)了響應(yīng)式計算框架，我們在創(chuàng)建Vue實例時，在data配置項中聲明的數(shù)據(jù)，
會被自動轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)源，當(dāng)我們修改這部分?jǐn)?shù)據(jù)時，依賴于這部分?jǐn)?shù)據(jù)的
計算過程 —— 例如界面渲染過程 —— 將自動被執(zhí)行，因此用戶界面也自動更新。

例如，對于下面的Vue實例：

new Vue({template:'<h1>{{counter}}</h1>',data: { counter: 0} })

Vue.js將自動建立如下的響應(yīng)式計算模型：

你看到，渲染計算依賴于Vue實例的counter，因此，當(dāng)counter變化時，
我們將自動得到刷新的DOM視圖。

7.交互行為聲明

視圖的作用是雙向的，除了向用戶展示信息，另一方面的用途在于采集用戶的輸入。

和數(shù)據(jù)綁定類似，Vue.js通過擴(kuò)展模板的HTML語法，來聲明對用戶交互事件
的監(jiān)聽。例如，下面的模板向Vue.js框架聲明了對button元素的click
事件的監(jiān)聽：

<button v-on:click="counter=0">RESET</button>

容易注意到button元素的特殊屬性：v-on:click。在Vue.js中，這種以
v-為前綴的特殊的HTML屬性，被稱為指令，通常用來增強(qiáng)或改變所在
HTML元素的行為。例如，v-on指令的作用，就是為宿主元素（在這里是button）
聲明事件監(jiān)聽：

類似于Vue.js中的其他指令，v-on指令包括以下幾個部分：

• 指令名稱 —— v-開始、:或=之前的部分稱為指令名稱。在上圖中，指令
  名稱是v-on。
• 指令參數(shù) —— :之后的部分稱為指令的參數(shù)。在上圖中，指令參數(shù)是：click。
  不是所有的Vue.js的指令都 需要參數(shù)，但是對于v-on指令而言，使用參數(shù)可以
  避免為不同的事件實現(xiàn)不同的指令，例如，我們可以同樣方式聲明對hover事件的
  監(jiān)聽：v-on:hover="..."。
• 指令的值 —— =之后的字符串稱為指令的值。在上圖中，指令的值是：counter=0。
  不同的指令，對指令值有不同的解釋。對于v-on指令，它的值表示當(dāng)事件發(fā)生時
  應(yīng)當(dāng)執(zhí)行的表達(dá)式。

指令值的執(zhí)行上下文

模板的數(shù)據(jù)上下文是所屬的Vue實例對象。容易理解，v-on指令的值表達(dá)式執(zhí)行
的上下文也是所屬的Vue實例對象，因此，在下面的示例中，當(dāng)點擊按鈕后，Vue實例
的counter屬性將復(fù)位為0：

new Vue({template:'<button v-on:click="counter=0">RESET</button>',data: { counter:123} })

簡化寫法

為了避免大量書寫v-on:前綴，Vue.js允許我們使用@來簡化事件綁定的聲明語法。
例如，下面的兩種聲明是完全等效的：

<button v-on:click="test">TEST</button> <button @click="test">TEST</button>

8.實例方法聲明

如果需要在點擊鼠標(biāo)時，執(zhí)行一個復(fù)雜的操作，那么采用單一的表達(dá)式
作為v-on指令值就不夠了 —— 我們需要將復(fù)雜的操作封裝為Vue實例的
一個方法，然后將v-on指令的值設(shè)置為這個方法。

使用methods配置項來聲明Vue實例的方法。當(dāng)Vue.js創(chuàng)建一個Vue實例時，
會將methods配置項中聲明的方法，掛接到Vue實例對象上：

實例方法可以直接通過實例對象調(diào)用，例如，對于上圖中的vm實例：

vm.handler(); //正確

實例方法另一個常見的用途，是將方法名聲明為v-on指令的值，當(dāng)事件
觸發(fā)時將調(diào)用該實例對象上該名稱的方法。例如，下面的代碼為Vue實例聲明
了reset方法，并將其名稱作為模板中button元素的v-on指令的值：

new Vue({template: '<button v-on:click="reset">{{counter}}</button>',data: { counter: 0},methods: {reset: function(){ this.counter = 0; }} })

方法函數(shù)體內(nèi)的this對象

需要指出，在methods配置對象中聲明的方法，其函數(shù)實現(xiàn)體內(nèi)，this總是
指向所在的Vue實例。所以，可以在這些函數(shù)體內(nèi)，直接訪問通過data配置項聲明
的數(shù)據(jù)，比如this.counter。

9.生命周期鉤子

每個 Vue 實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。在這個過程中，實例也會
調(diào)用一些生命周期鉤子（Lifecycle Hook） ，這就給我們提供了執(zhí)行自定義邏輯
的機(jī)會。

初始化鉤子

初始化鉤子包括beforeCreate和created。這兩個鉤子允許我們在實例被渲染
到DOM之前執(zhí)行一些初始化操作。由于DOM還未就緒，在初始化鉤子里，不能訪問DOM
對象，實例的$el屬性 —— 宿主DOM對象 —— 也沒有創(chuàng)建:

beforeCreate是最早被調(diào)用的鉤子，這時Vue.js還沒有構(gòu)造響應(yīng)式數(shù)據(jù)源，也沒
有初始化實例的事件。

在created鉤子里，我們可以訪問響應(yīng)式數(shù)據(jù)、監(jiān)聽實例事件。不過還沒有將虛擬
DOM渲染到文檔DOM樹。

DOM掛載鉤子

掛載鉤子包括beforeMount和mounted，是最常使用的鉤子。這兩個鉤子允許我們
在首次渲染*前后立即訪問Vue實例。因此，如果我們需要在首次渲染前后訪問或修改
DOM對象（例如，通過實例的$el屬性訪問宿主元素），就應(yīng)該使用這兩個鉤子：

beforeMount鉤子在模板編譯完成后、首次渲染前執(zhí)行。

在mounted鉤子內(nèi)可以自由地訪問組件渲染后的DOM對象（this.$el）。這個鉤子
經(jīng)常被用于修改DOM、集成第三方庫等操作。

更新鉤子

更新鉤子包括beforeUpdate和updated。每當(dāng)實例需要重新渲染（例如模型發(fā)生變化等），
框架就會調(diào)用這兩個鉤子：

beforeUpdate鉤子在模型數(shù)據(jù)變化之后、渲染周期開始之前執(zhí)行。在這個鉤子里我們可以
在界面渲染前獲取實例屬性的最新值。

updated鉤子在重新渲染完成后被調(diào)用。

DOM卸載鉤子

DOM卸載鉤子包括beforeDestroy和destroyed，當(dāng)實例被從DOM樹移除時執(zhí)行。
這兩個鉤子允許我們在實例銷毀前后執(zhí)行一些清理或統(tǒng)計分析的工作：

beforeDestroy鉤子在實例被銷毀（利用，通過調(diào)用實例的$destroy()方法）之前被調(diào)用。
在這個鉤子里可以清理對響應(yīng)式數(shù)據(jù)的監(jiān)聽。

destroyed鉤子在實例被銷毀之后被調(diào)用，此時實例已經(jīng)不剩什么東西了:-( 也可以
在這個鉤子里執(zhí)行一些最后時刻的清理工作，或者向遠(yuǎn)程服務(wù)器通知實例被銷毀的消息。

大量相關(guān)的示例、練習(xí)和更多內(nèi)容在這里：

http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

vuex 2
http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a

vuerouter 2
http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50

總結(jié)

以上是生活随笔為你收集整理的Vue.js 2 渐进式前端框架 的最佳学习方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。