Vue.js 2 入門與提升（一）

時間 2019-11-12

標籤 vue.js vue 入門提升欄目 JavaScript 简体版

原文原文鏈接

** Vue.js —— 漸進式前端框架 **前端

Vue.js做爲一個後起的前端框架，借鑑了Angular 、React等現代前端框架/庫的諸多特色，而且取得了至關不錯的成績。vue

Vue.js的定位是一個__漸進式__框架，做者的說法是：react

與其餘框架的區別就是漸進式的想法，也就是__Progressive__——這個詞在英文中定義是漸進，一步一步，不是說你必須一竿子把全部的東西都用上。vuex

這或許是Vue.js受到愈來愈多關注的一個重要緣由：你只須要具有基本的HTML/JavaScript/CSS 基礎，就能夠快速上手，讓你用上這些現代Web開發中的先進技術來提升你的生產力：編程

響應式編程、聲明式渲染、組件化開發、虛擬DOM、跨平臺支持...瀏覽器

儘管Vue.js缺乏使人眼前一亮的首創性前端開發理念，但它集中實現了最近幾年前端領域技術大躍進的諸多新理念、新技術。或許你認爲這些創新起源於Angular、React或者Knockout，但Vue.js能夠無縫引導大量jQuery時代的前端工程師進入新的時代，這也是一個至關值得稱讚的巨大的成果。前端框架

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

所以Vue.js更適合我的或小型團隊上手 —— 你沒有那麼多的精力，一開始就考慮構建工具鏈、測試等諸多問題。你迫切須要的，是高效地生產出，你的用戶須要的產品或服務。前端工程師

不過__漸進式__意味着Vue.js沒有侷限於小型應用的開發：你同樣可使用ES201五、使用構建工具鏈、使用集中狀態管理這些來開發大規模項目。只是，Vue.js容許你把這些東西的學習和應用，在稍晚一些的時候引入，而不是必須先學習不少新東西才能上手。app

** 1.Hello Vue.js 2 **

和其餘現代前端框架同樣，Vue.js也是以__JavaScrip__做爲應用的入口，HTML只是提供一個渲染的錨點 —— 這便利於Vue.js 2遷移到瀏覽器以外的其餘平臺，好比移動設備，或者服務器。

建立一個Vue.js的Hello World示例至關簡單：

一、引入vue.js庫

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

這將暴露出一個全局類——Vue，你能夠用它來建立一個Vue實例。

二、建立Vue實例

Vue是一個封裝了響應式開發、模板編譯等諸多特性的基礎類，你經過提供一些 配置項，來建立一個實例：

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

一個常見的配置項是template，以相似HTML的語法來編制視圖的結構：

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

三、渲染Vue實例

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

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

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用來聲明目標渲染錨點，例如：

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

工做原理

若是Vue.js檢測到你指定了el配置項，將在內部自動地執行渲染 —— 這時你再也不須要額外調用$mount()方法了：

咱們看到的大部分Vue.js示例代碼，一般都會採用這種隱式渲染的寫法。不過我認爲在開始學習時，使用__儀式感__更強的$mount()方法，會讓你更多一點理解Vue.js 的設計思想。

** 3.使用HTML模板 **

在建立Vue實例時，若是聲明瞭el配置項，那麼你也能夠省略template 選項。這時候，Vue.js將提取錨點元素的HTML內容，作爲模板。

咱們可使用單一的el配置項來建立Vue實例：

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

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

工做原理

當Vue.js發現你提供的選項中沒有template屬性時，將提取el屬性所指定的DOM節點的outerHTML內容做爲模板內容。這相似於：

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

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

** 4.模型聲明與綁定 **

模板的存在的惟一目的，是爲了和數據綁定。

Vue.js在標準HTML語法基礎上，增長了一些擴展的語法來聲明數據的綁定。

數據綁定語法

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

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

當Vue.js渲染此模板時，將使用實例__數據上下文__中的name變量值，來計算最終的渲染結果。

數據模型聲明

在建立Vue實例時，使用data配置項來聲明Vue實例的數據模型。

例如，下面的示例建立了一個具備初始模型{name:'Elthon John'}的Vue實例：

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

Vue.js根據data配置項聲明的初始模型構造__數據上下文__，進而和template配置項所聲明的模板執行綁定，所以，上面示例的最終渲染結果是：<h1>Elton John</h1>。

** 5.模板的數據上下文 **

因爲一般使用data配置項來聲明Vue實例的數據模型，這容易讓咱們誤覺得只有在data對象上聲明的數據才能夠與模板綁定。

固然不是這樣，模板的數據上下文 = Vue實例對象。

當Vue.js建立一個Vue實例時，它會將data配置項的每一個根屬性，（通過若干處理後）添加爲實例的根屬性。

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

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

既然如此，咱們爲何須要使用data配置項來聲明數據模型，而不是直接在實例上設置數據模型呢？例如，下面的代碼有什麼問題呢？

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

這是vue.js 2的一個核心特性 ———— 響應式計算。

** 6.響應式計算機制 **

響應式計算是一種面向變化傳播的編程範式，響應式計算模型主要包括兩個部分：數據源和（依賴於數據源的）計算過程。當數據源發生變化時，將自動執行計算過程（好比視圖的渲染過程）：

雖然響應式計算本質上是一種通用的編程範式，但這種模型最初就是爲了簡化交互式用戶界面的建立和實時系統動畫的繪製而提出來的一種方法，它使得咱們只須要修改數據源就能夠自動更新用戶界面。

Vue.js內部實現了響應式計算框架，咱們在建立Vue實例時，在data配置項中聲明的數據，會被自動轉換爲__響應式__數據源，當咱們修改這部分數據時，依賴於這部分數據的計算過程 —— 例如界面渲染過程 —— 將自動被執行，所以用戶界面也自動更新。

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

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

Vue.js將自動創建以下的響應式計算模型：

你看到，渲染計算依賴於Vue實例的counter，所以，當counter變化時，咱們將自動獲得刷新的DOM視圖。

** 7.交互行爲聲明 **

視圖的做用是雙向的，除了向用戶展現信息，另外一方面的用途在於採集用戶的輸入。

和數據綁定相似，Vue.js經過擴展模板的HTML語法，來聲明對用戶交互事件的監聽。例如，下面的模板向Vue.js框架聲明瞭對button元素的click 事件的監聽：

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

容易注意到button元素的特殊屬性：v-on:click。在Vue.js中，這種以 *v-*爲前綴的特殊的HTML屬性，被稱爲__指令__，一般用來加強或改變所在 HTML元素的行爲。例如，v-on指令的做用，就是爲宿主元素（在這裏是button）聲明事件監聽：

相似於Vue.js中的其餘指令，v-on指令包括如下幾個部分：

指令名稱 —— v-開始、:或=以前的部分稱爲指令名稱。在上圖中，指令名稱是v-on。
指令參數 —— :以後的部分稱爲指令的參數。在上圖中，指令參數是：click。不是全部的Vue.js的指令都須要參數，可是對於v-on指令而言，使用參數能夠避免爲不一樣的事件實現不一樣的指令，例如，咱們能夠一樣方式聲明對hover事件的監聽：v-on:hover="..."。
指令的值 —— =以後的字符串稱爲指令的值。在上圖中，指令的值是：counter=0。不一樣的指令，對指令值有不一樣的解釋。對於v-on指令，它的值表示當事件發生時應當執行的表達式。

指令值的執行上下文

模板的數據上下文是所屬的Vue實例對象。容易理解，v-on指令的值表達式執行的上下文也是所屬的Vue實例對象，所以，在下面的示例中，當點擊按鈕後，Vue實例的counter屬性將復位爲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.實例方法聲明 **

若是須要在點擊鼠標時，執行一個複雜的操做，那麼採用單一的表達式做爲v-on指令值就不夠了 —— 咱們須要將複雜的操做封裝爲Vue實例的一個方法，而後將v-on指令的值設置爲這個方法。

使用methods配置項來聲明Vue實例的方法。當Vue.js建立一個Vue實例時，會將methods配置項中聲明的方法，掛接到Vue實例對象上：

實例方法能夠直接經過實例對象調用，例如，對於上圖中的vm實例：

vm.handler(); //正確

實例方法另外一個常見的用途，是將方法名聲明爲v-on指令的值，當事件觸發時將調用該實例對象上該名稱的方法。例如，下面的代碼爲Vue實例聲明了reset方法，並將其名稱做爲模板中button元素的v-on指令的值：

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

方法函數體內的this對象

須要指出，在methods配置對象中聲明的方法，其函數實現體內，this老是指向所在的Vue實例。因此，能夠在這些函數體內，直接訪問經過data配置項聲明的數據，好比this.counter。

** 9.生命週期鉤子 **

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。在這個過程當中，實例也會調用一些生命週期鉤子（Lifecycle Hook），這就給咱們提供了執行自定義邏輯的機會。

初始化鉤子

初始化鉤子包括beforeCreate和created。這兩個鉤子容許咱們在實例被渲染到DOM以前執行一些初始化操做。因爲DOM還未就緒，在初始化鉤子裏，不能訪問DOM 對象，實例的$el屬性 —— 宿主DOM對象 —— 也沒有建立:

_beforeCreate_是最先被調用的鉤子，這時Vue.js尚未構造響應式數據源，也沒有初始化實例的事件。

在_created_鉤子裏，咱們能夠訪問響應式數據、監聽實例事件。不過尚未將虛擬 DOM渲染到文檔DOM樹。

DOM掛載鉤子

掛載鉤子包括beforeMount和mounted，是最常使用的鉤子。這兩個鉤子容許咱們在*首次渲染**先後當即訪問Vue實例。所以，若是咱們須要在首次渲染先後訪問或修改 DOM對象（例如，經過實例的$el屬性訪問宿主元素），就應該使用這兩個鉤子：

_beforeMount_鉤子在模板編譯完成後、首次渲染前執行。

在_mounted_鉤子內能夠自由地訪問組件渲染後的DOM對象（this.$el）。這個鉤子常常被用於修改DOM、集成第三方庫等操做。