模板語法
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。在底層的實現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。
插值
文本
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上 msg 屬性的值。無論何時，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。
通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上所有的數(shù)據(jù)綁定：
<span v-once>這個將不會改變: {{ msg }}</span>
原始html
雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
這個 div 的內(nèi)容將會被替換成為屬性值 rawHtml，直接作為 HTML——會忽略解析屬性值中的數(shù)據(jù)綁定。
特性
mustache 語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
這同樣適用于布爾類特性，如果求值結(jié)果是 falsy 的值 ，則該特性將會被刪除：
<button v-bind:disabled="isButtonDisabled">Button</button>
注：求值結(jié)果是 falsy 的值
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all) [1]
使用javascript表達式
對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
每個綁定都只能包含單個表達式
<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性。
<p v-if="seen">現(xiàn)在你看到我了</p>
參數(shù)
v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：
<a v-bind:href="url"></a>
v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">
修飾符
修飾符 (Modifiers) 是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
縮寫
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
