輸出

{{ msg }} 兩個括號輸出實例的 data 屬性值，并與實例的值綁定，這個語法叫 Mustache。

如果只想輸出一次內(nèi)容，不與實例的值綁定，可以使用 {{* msg }}

{{{ msg }}} 三個括號將 data 屬性值以原生 html 的方式輸出，但不會與實例的值綁定，如果需要復(fù)用模板片段，請使用 partials。

html 標(biāo)簽的特性也可以使用 Mustache。

<div id="item-{{ id }}"></div>

但屬于 Vue 的指令和特有特性不可使用 Mustache，Vue 會給出提示。

表達(dá)式

放在 Mustache 標(biāo)簽內(nèi)的文本稱為綁定表達(dá)式。在 Vue.js 中，一段綁定表達(dá)式由一個簡單的 JavaScript 表達(dá)式和可選的一個或多個過濾器構(gòu)成。

Vue 的數(shù)據(jù)綁定支持全功能的 JavaScript 表達(dá)式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

這些表達(dá)式將在所屬的 Vue 實例的作用域中計算，有一個限制是只能執(zhí)行單行表達(dá)式，所以下面的做法是無效的：

<!-- 這是一個語句，不是一個表達(dá)式： -->
{{ var a = 1 }}

<!-- 流程控制也不可以，可改用三元表達(dá)式 -->
{{ if (ok) { return message } }}

過濾器

表達(dá)式后邊可以接一個或多個過濾器,如 “管道符”，我們將 message 的值 “管輸(pipe)” 到內(nèi)置的過濾器 capitalize：

{{ message | capitalize }}

過濾器 capitalize 其實是一個 JavaScript 函數(shù)，返回大寫值，Vue 提供了數(shù)個內(nèi)置的過濾器，將來會學(xué)習(xí)如何開發(fā)自己的過濾器。

注意管道語法不是 JavaScript 語法，因此不能在表達(dá)式內(nèi)使用過濾器，只能添加到表達(dá)式的后面。

過濾器可以串聯(lián)：

{{ message | capitalize | filterB }}

過濾器也可以接受參數(shù)：

{{ message | filterA 'arg1' arg2 }}

過濾器函數(shù)始終以表達(dá)式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達(dá)式計算。這里，字符串 'arg1' 將傳給過濾器作為第二個參數(shù)，表達(dá)式 arg2 的值在計算出來之后作為第三個參數(shù)。

指令

指令 (Directives) 是指特殊的帶有 v- 前綴的特性，指令的值限制為綁定表達(dá)式，因此上面提到的 JavaScript 表達(dá)式和過濾器在這里也適用。

指令的職責(zé)是當(dāng)表達(dá)式的值變化時把某些特殊行為應(yīng)用到 DOM 上。

例如 v-if，如果 greeting 的值為 true 或 false，p 標(biāo)簽將被刪除或插入：

<p v-if="greeting">Hello!</p>

參數(shù)

有些指令可以在名稱后面添加參數(shù)，用 : 隔開，例如

<a v-bind:href="url"></a>

意思是把標(biāo)簽的 href 特性與表達(dá)式 url 的值綁定起來。
可以用特性插值 href="{{url}}" 獲得同樣的效果，實際上內(nèi)部插值會轉(zhuǎn)換成 v-bind 綁定。

另一個常用的指令是 v-on，用來監(jiān)聽 DOM 事件。

<a v-on:click="doSomething">

縮寫

v-bind 可以縮寫為：

//完整語法
<a v-bind:href="url"></a>
//縮寫語法
<a :href="url"></a>

v-on 可以縮寫為：

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>

<!-- 縮寫 -->
<a @click="doSomething"></a>