模板語法
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表達(dá)式
對于所有的數(shù)據(jù)綁定网棍，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
每個綁定都只能包含單個表達(dá)式
<!-- 這是語句妇智，不是表達(dá)式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效滥玷，請使用三元表達(dá)式 -->
{{ 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>
