`> Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
插值
#文本
數據綁定最常見的形式就是使用‘Mustache’語法（雙大括號）的文本插值
<span>message:{{message}}</span> //最簡單的插值應用
Mustache會代替對應數據對象上的message屬性多對應的值。無論何時只要message的值改變了，插值的內容也會跟著更新。
<span v-once>{{once}}</span>
once指令，只會在第一次渲染的時候有效，后面once的值變化都不會影響插值的更新
#純HTML
雙大括號只會講數據解析成純文本，而非HTML。想要輸出正在的HTML，要用v-html指令
<div v-html="html"></div>
被插入的值都會被當做HTML，數據綁定將會失效。
注意：站點上動態渲染html是非常危險的，因為很容易被XSS攻擊，請給可信任內容提供插值，切勿為用戶提供內容插值
#屬性
Mustache不能在HTML屬性中去使用，應該使用v-bind。
<span v-bind:class="red">hello Vue!</span> //添加class屬性
這對布爾值也有效
<button v-bind:disabled='result'>Button</button>//如果result等于false，disabled屬性就會被移除
#使用javascript表達式
在模板中可以使用js表達式
{{number + 1}}
{{ok ? 'yes' : 'no'}}
{{msg.split(',').reverse().join(',')}}
<p v-bind:id="'item' + id"></p>
以下幾種情況不會成功，因為他們都不是表達式
{{var a = 1}}//這是語句
{{if(ok){code}}};//流程控制語句，可用三目運算代替
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量
指令
指令（Directive）是帶有V-前綴的特殊屬性。
#參數
一些指令可以接受一個參數，在指令后一冒號指明
<p v-bind:id='id'>1111</p>//用相應的更新HTML屬性
<p :id='id'></p>//簡寫
<p v-on:click='fn'>1111</p>//監聽dom事件
<p @click='fn'>1111</p>//簡寫
#修飾符
修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定
<form v-on:submit.prevent="onSubmit"></form>
過濾器
Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式
2.0廢棄了了1.0的原生過濾器
{{ message | capitalize }}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
過濾器可以串聯
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數，因此可以接受參數：
{{ message | filterA('arg1', arg2) }}
