Vue.js 教程
Vue.js 使用了基于 HTML 的模版語(yǔ)法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。
結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
數(shù)據(jù)綁定最常見的形式就是使用 {{...}}（雙大括號(hào)）的文本插值：
使用 v-html 指令用于輸出 html 代碼：
HTML 屬性中的值應(yīng)使用 v-bind 指令。
以下實(shí)例判斷 use 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
指令是帶有 v- 前綴的特殊屬性。
指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到 DOM 上。如下例子：
這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來(lái)決定是否插入 p 元素。
參數(shù)在指令后以冒號(hào)指明。例如， v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性：
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定。
另一個(gè)例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">
在這里參數(shù)是監(jiān)聽的事件名。
修飾符是以半角句號(hào) . 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
在 input 輸入框中我們可以使用 v-model 指令來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
v-model 指令用來(lái)在 input、select、textarea、checkbox、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值。
按鈕的事件我們可以使用 v-on 監(jiān)聽事件，并對(duì)用戶的輸入進(jìn)行響應(yīng)。
以下實(shí)例在用戶點(diǎn)擊按鈕后對(duì)字符串進(jìn)行反轉(zhuǎn)操作：
Vue.js 允許你自定義過(guò)濾器，被用作一些常見的文本格式化。由"管道符"指示, 格式如下：
<!-- 在兩個(gè)大括號(hào)中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
過(guò)濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)。
以下實(shí)例對(duì)輸入的字符串第一個(gè)字母轉(zhuǎn)為大寫：
過(guò)濾器可以串聯(lián)：
{{ message | filterA | filterB }}過(guò)濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：
{{ message | filterA('arg1', arg2) }}這里，message 是第一個(gè)參數(shù)，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)， arg2 表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)。
Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫：
<!-- 完整語(yǔ)法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>
<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>