Vue.js 使用了基於 HTML 的模版語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函式。結合響應系統，在應用狀態改變時， Vue 能夠智慧地計算出重新渲染元件的最小代價並應用到 DOM 操作上。

插值

模板表示式都被放在沙盒中，只能訪問全域性變數的一個白名單，如Math和Date。你不應該在模板表示式中試圖訪問使用者定義的全域性變數。

資料繫結最常見的形式就是使用 雙大括號{{ ？}}，{{}}的語句叫做mustache

{{？}}將會被替代為對應資料物件上？ 屬性的值，只要繫結的？值變化，其他藉助？的地方也將變化

如<span>Message: {{message}}</span>  // <span>類似<div>

　　v-once 指令可以一次性插值，但是修改資料後，插值的地方不會改變，將影響資料繫結

<span v-once>hhhhhh{{message}}</span>  //被插入的內容都會被當做 HTML —— 資料繫結會被忽略

純HTML插值

雙大括號會將資料解釋為純文字，而非 HTML 。為了輸出真正的 HTML ，你需要使用v-html指令

<div v-html="hhhhh"></div>

屬性

{{？}}的資料不能直接在HTML裡使用，需要藉助v-bind

<div v-bind:id="dynamicId"></div>

v-bind指令對於布林值屬性也有效

<button v-bind:disabled="someDynamicCondition">Button</button>  //如果條件被求值為 false 的話該屬性會被移除：

繫結還可以繫結以下這樣複雜的表示式，但是隻能繫結單個表示式，繫結語句/多個表示式什麼的是不可行的

過濾器

Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。過濾器應該被新增在mustache插值的尾部，由“管道符”指示：

{{ message | capitalize }}   //capitalize是Vue（）的一個屬性，像data一樣，當然也可以不這樣寫，自己取名

過濾器可以新增多個

{{ message | filterA | filterB }}

過濾器也是JavaScript函式，可以接受引數