在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。
插值
“Mustache”語法（雙打括號）
文本
<span>Message: {{ msg }}</span>
// v-once只綁定一次
<span v-once>Message: {{ msg }}</span>
html
雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你需要使用 v-html 指令
<p>使用v-html directive之後
<span v-html="rawHtml"></span></p>
data = {message : '基本信息','seen': false, rawHtml:'<span style="color:red">This should be red.</span>'}
注意，你不能使用 v-html 來複合局部模板，因爲 Vue 不是基於字符串的模板引擎。反之，對於用戶界面 (UI)，組件更適合作爲可重用和可組合的基本單位。
特性
Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令
<button v-bind:disabled="isBtnDisabled">按鈕</button
如果isBtnDisabled的值是null、undefined、false，則特性不會被渲染
js表達式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量。
指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式，指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
v-for 除外
參數
一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。
- v-bind 指令可以用於響應式地更新 HTML 特性
<a v-bind:href="url">...</a>
- v-on 指令，它用於監聽 DOM 事件
<a v-on:click="doSomething">...</a>
動態參數
這裏的 [attributeName] 會被作爲一個 JavaScript 表達式進行動態求值，求得的值將會作爲最終的參數來使用。
<a v-bind:[attributeName]="url"> ... </a>
動態參數表達式有一些語法約束，因爲某些字符，如空格和引號，放在 HTML attribute 名裏是無效的。例如：[attributeName]在瀏覽器中轉化爲attributename
修飾符
修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定
<form v-on:submit.prevent="onSubmit">...</form>
縮寫
Vue 爲 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>