5. Vuejs
本章的主要內容是帶領大家瞭解前端框架Vuejs的基礎使用方法。Vuejs有自己的官方網站，供大家隨時參考學習：https://vuejs.org/ 官方網站上不僅有詳細的指南，甚至還有視頻教程供大家使用。
簡介
如果說輕量級框架Jquery是使用JS對網頁的修修補補的話，Vuejs就好像讓你開高達。你的所有頁面視圖代碼將首先交給Vuejs框架進行預處理，然後通過Vuejs渲染爲最終的網頁。因此，通過操作Vuejs框架中的數據，就可以實現對網頁顯示的動態更新。
這樣的一種邏輯模式，被稱爲MVVM，即Model-View-ViewModel，通過Vuejs框架把核心數據模型和視圖相連接，實現自然而高效的應用交互。
舉個例子，如果你在做一個電商網頁，要實現用戶把商品添加進入購物車這個功能。在這裏，購物車中的貨物數據就是核心數據模型（model），而我們網頁上購物車列表等呈現給用戶看的HTML元素就是視圖（view）。我們的Vuejs框架所做的，就是維持核心數據和視圖的統一，但你改變購物車貨物的數據時，網頁上購物車列表的內容也會被更新。
Vuejs其實還支持組件化，所以成爲漸進式的框架，你可以通過拼裝組件來實現整個應用的構建。
下面讓我們看一看，Vuejs是如何使用的。
Hello Vue!
現在我們又要拿出sublime啦！打開之前玩耍過的index.html所在的文件夾，在HTML文件中寫入如下內容（完整代碼哦）：
<!DOCTYPE HTML>
<html>
<head>
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
接下來打開index.js並寫入如下內容：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
接下來使用瀏覽器打開index.html，就會發現，頁面上並沒有顯示兩個大括號，而是顯示出了Hello Vue！這是爲什麼呢？讓我們來學習一下上面代碼的工作原理吧：
- HTML代碼第5行：引入Vuejs庫。加載JS庫通常被放在
head元素中。在通常的網頁上，我們往往使用公共CDN引入想要的JS庫（這裏使用了jsdelivr）。公共CDN就是給大家免費提供庫的快速加載的網絡服務。 - HTML代碼倒數第3行：引入我們自己寫的腳本文件。通常自己的JS代碼在
body元素的最後引入，這是爲了等待頁面元素加載完全，讓JS能夠正常工作。 <div id="app">：在這裏我們定義了一個具有屬性id="app"的塊元素，這也是Vuejs應用常用的寫法。- JS代碼第1行：新建Vue對象。因爲引入了Vuejs庫，我們可以新建一個Vue對象。變量名通常叫
app，下面的內容都是新建的Vue對象的內部變量等。 - JS代碼第2行：在Vue對象內部，通過指定
el變量的值，我們可以控制當前Vue對象綁定的HTML元素。el變量的值是一個字符串，與CSS選擇器語法相同。 - JS代碼第3-5行：在Vue對象內部，指定
data變量的值（是一個對象），就可以讓這個子對象中的所有值被Vuejs框架自動追蹤和更新。 - HTML代碼中的
{{ message }}：兩個大括號被稱爲Mustache語法，被兩個大括號包含的文本會被Vue對象解析爲代碼。所以這裏就是顯示了Vue對象中data對象的message變量的值。
當HTML代碼的元素加載完成以後，瀏覽器開始加載我們自己寫的JS代碼index.js，這個時候創建的Vue對象會自動接管屬性id="app"的塊元素和它內部的所有內容。這些內容將會經過Vuejs框架的處理，由Vuejs動態渲染。這部分原理非常複雜不在本篇教程的介紹範圍內，有興趣的讀者可以自行學習。
在Vuejs接管的塊元素外部寫任何Mustache或者Vuejs相關的語法都是無效的。
初步見識到了Vuejs的作用原理以後，我們進一步瞭解一些Vuejs的使用方法。
Vue對象
首先我們先來了解一下Vue對象的內部寫法。
上一節中我們已經講過了el變量：Vue對象綁定的HTML元素。
data
data變量的值應當是一個對象，包含了需要在Vuejs框架中渲染的變量。注意，如果data變量中包含數組，數組元素不會被Vuejs自動追蹤和更新，需要使用this.$set()函數，或者在改變以後使用this.$forceUpdate()強制重新渲染。
methods
methods變量的值應當是一個對象，對象內部的每一個變量的值都必須是一個函數。所有需要在Vuejs框架內實現的交互，或者需要訪問Vue對象內部的函數過程都必須寫在methods對象內部。在methods函數內部，可以用this直接訪問當前Vue對象的其他函數或者data中的數據（不需要再添加methods或者data）。例如，在某個函數中可以用this.message直接訪問上一節中data對象中的message變量。
computed
computed與methods類似，應當包含函數。在Vuejs框架中，計算屬性computed是指一組自動更新的變量，這些變量可能與其他變量有一定的依賴關係（通過一個函數計算出來）。計算屬性保證，當Vue對象中的變量有更新的時候，依賴被更新變量的計算屬性值也會被更新。
例如：
data: {
a: 1,
b: 2
},
computed: {
sum: function() {
return this.a + this.b;
}
}
無論變量a和b如何變化，計算屬性sum始終會保持爲它們的和。
其他
其他一些內容包括監視屬性watch，可以在變量發生變化的時候觸發特殊函數。還有生命週期函數。
生命週期函數是指，在Vue對象從創建到最終被瀏覽器銷燬的各個階段，你可以自己定義執行一些函數過程。
例如，在Vue對象被創建的時候，你可以執行一部分初始化操作：
created: function() {
console.log("Vue object is created!");
}
具體的生命週期文檔詳見官網上的章節。
屬性綁定
除了最開始介紹的Mustache語法直接控制網頁顯示的內容，Vuejs框架還通過在HTML代碼中加入特殊的屬性，來協助控制網頁的內容和渲染。
控制屬性
Vuejs框架可以通過控制屬性來控制HTML元素的渲染情況。
v-if屬性：控制當前HTML元素是否渲染。v-else屬性：沒有屬性值，與v-if連用。v-show屬性：控制當前HTML元素是否顯示。v-for屬性：循環渲染。
這些屬性的值均爲字符串，會被Vuejs框架解析爲代碼。
v-if和v-show的區別：如果HTML元素不渲染，DOM上直接沒有這個元素。如果HTML元素不顯示，只是它被設置了CSS屬性display: none;而已，它還可以具有其它功能。
例如HTML中寫（放在id="app"的塊元素裏面）：
<div v-if="choice == 'A'">A</div>
<div v-else>others</div>
在JS中的data對象中的變量choice的值，就會直接影響網頁上這兩個元素的渲染情況。
再例如，data對象中具有變量list: ["A", "B", "C", "D", "E"]，則下列代碼會自動循環渲染出這個數組的所有項。
<div v-for="l in list">{{ l }}</div>
就好像循環一樣，生成了循環變量l，指代的是列表中的每一項。（注意，雖然用的是in，但是指代的是數組中的值，不是下標）
嘗試一下吧！
屬性值綁定
有時候我們還需要控制元素的屬性，比如動態改變元素的CSS（控制style屬性），或者直接增加CSS類名（控制class屬性），這個時候我們可以使用屬性修飾符v-bind。
例如：
<div v-bind:style="exStyle">Example</div>
在原有屬性之前添加修飾符和冒號，就可以讓引號內的內容被解析爲代碼（一個變量的值）。修改exStyle的值就可以動態更新style屬性的值。
同時，因爲屬性值綁定使用非常多，我們可以省略v-bind，只留一個冒號：<div :style="exStyle">Example</div>。
style和class屬性值綁定還有更多用法，請參考官網教程。
雙向綁定
如果需要操作的元素是一個輸入框input或者textarea，則可以使用雙向綁定v-model：
<input type="text" :placeholder="tip" v-model="content">
在這個代碼中，首先綁定了屬性placeholder的值到變量tip上，這個綁定是單向的，改變變量tip的值可以改變屬性placeholder。接下來雙向綁定了輸入內容到變量content上，如果改變變量content的值，輸入框的內容會更新；如果用戶改變了輸入框的內容，變量content也會更新。
事件處理
爲了實現用戶對網頁的操作，Vuejs框架提供了事件屬性，使用屬性修飾符v-on來控制。
例如：
<div v-on:click="handle">Click me!</div>
綁定的字符串被解析爲代碼，這裏handle是一個Vue對象中的函數。用戶點擊這個塊元素的時候，Vuejs框架會自動運行handle函數。
Vuejs幾乎涵蓋了可能用到的所有事件，具體列表詳見官網。還有更多事件後綴修飾符，這裏都不做詳細敘述了，官網上講的非常清楚。
寫在後面
Vuejs框架有很多很多的東西要學，如果有時間建議仔細把官方文檔過一遍，瞭解一下它的作用原理什麼的。很多細節上的東西本篇教程限於篇幅也寫不完，也不需要寫完（畢竟官網都有）。學到這個時候，相信各位已經具有了一定的自我學習的能力，可以嘗試自己去尋找參考文檔並學習它的使用方法。
Vuejs框架最重要的“漸進式”，我們留到下一章再講。建議大家稍微閱讀一下官方網站上關於“組件”的章節，對組件化有一個簡單的瞭解。
在這個真正日新月異的時代，開發領域主要還得靠自己去看浩如星辰的官方文檔。