模板語(yǔ)法
插值
# 文本
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 “Mustache” 語(yǔ)法（雙大括號(hào)）的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 msg 屬性的值蜓席。當(dāng)綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變時(shí)，插值處的內(nèi)容都會(huì)更新盖喷。
# 純HTML
雙大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本查刻，而非 HTML 咙轩。為了輸出真正的 HTML 眶明，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
被插入的內(nèi)容都會(huì)被當(dāng)做 HTML —— 數(shù)據(jù)綁定會(huì)被忽略惩坑。注意，你不能使用 v-html 來(lái)復(fù)合局部模板朝扼，因?yàn)?Vue 不是基于字符串的模板引擎赃阀。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元。
# 屬性
Mustache 不能在 HTML 屬性中使用吟税，應(yīng)使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
這對(duì)布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會(huì)被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>
# 使用javascript表達(dá)式
迄今為止凹耙，在我們的模板中姿现，我們一直都只綁定簡(jiǎn)單的屬性鍵值肠仪。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定备典， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持异旧。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個(gè)限制就是提佣，每個(gè)綁定都只能包含單個(gè)表達(dá)式.
指令
指令（Directives）是帶有 v- 前綴的特殊屬性吮蛹。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了 v-for，之后再討論）拌屏。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上潮针。
# 參數(shù)
一些指令能接受一個(gè)“參數(shù)”，在指令后以冒號(hào)指明倚喂。例如每篷， v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性：
<a v-bind:href="url"></a>
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url的值綁定端圈。
另一個(gè)例子是 v-on 指令焦读，它用于監(jiān)聽(tīng) DOM 事件：
<a v-on:click="doSomething">
在這里參數(shù)是監(jiān)聽(tīng)的事件名。
# 修飾符
修飾符（Modifiers）是以半角句號(hào) '.' 指明的特殊后綴舱权，用于指出一個(gè)指定應(yīng)該以特殊方式綁定矗晃。例如，'.prevent' 修飾符告訴 'v-on' 指令對(duì)于觸發(fā)的事件調(diào)用 'event.preventDefault()'：
<form v-on:submit.prevent="onSubmit"></form>
過(guò)濾器
Vue.js 允許你自定義過(guò)濾器宴倍，被用作一些常見(jiàn)的文本格式化张症。過(guò)濾器應(yīng)該被添加在 mustache 插值的尾部仓技，由“管道符”指示：
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
ue 2.x 中，過(guò)濾器只能在 mustache 綁定和 v-bind 表達(dá)式（從 2.1.0 開始支持）中使用吠冤，因?yàn)檫^(guò)濾器設(shè)計(jì)目的就是用于文本轉(zhuǎn)換浑彰。為了在其他指令中實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計(jì)算屬性拯辙。
過(guò)濾器函數(shù)總接受表達(dá)式的值作為第一個(gè)參數(shù)郭变。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
過(guò)濾器可以串聯(lián)：
{{ message | filterA | filterB }}
過(guò)濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里涯保，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)诉濒， arg2表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)。
縮寫
v- 前綴在模板中是作為一個(gè)標(biāo)示 Vue 特殊屬性的明顯標(biāo)識(shí)夕春。當(dāng)你使用 Vue.js 為現(xiàn)有的標(biāo)記添加動(dòng)態(tài)行為時(shí)未荒，它會(huì)很有用，但對(duì)于一些經(jīng)常使用的指令來(lái)說(shuō)有點(diǎn)繁瑣及志。同時(shí)片排，當(dāng)搭建 Vue.js 管理所有模板的 SPA 時(shí)，v- 前綴也變得沒(méi)那么重要了速侈。因此率寡，Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫：
# v-bind 縮寫
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
# v-on 縮寫
<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
