數據綁定語法

Vue.js 的模板是基于 DOM 實現的。這意味著所有的 Vue.js 模板都是可解析的有效的 HTML，且通過一些特殊的特性做了增強。Vue 模板因而從根本上不同于基于字符串的模板，請記住這點。

插值

文本

數據綁定最基礎的形式是文本插值，使用 “Mustache” 語法（雙大括號）：

<span>Message: {{ msg }}</span>

Mustache 標簽會被相應數據對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。

你也可以只處理單次插值，今后的數據變化就不會再引起插值更新了：

<span>This will never change: {{* msg }}</span>

原始的 HTML

雙 Mustache 標簽將數據解析為純文本而不是 HTML。為了輸出真的 HTML 字符串，需要用三 Mustache 標簽：

<div>{{{ raw_html }}}</div>

內容以 HTML 字符串插入——數據綁定將被忽略。如果需要復用模板片斷，應當使用partials。

在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。記住，只對可信內容使用 HTML 插值，永不用于用戶提交的內容。

HTML 特性

Mustache 標簽也可以用在 HTML 特性 (Attributes) 內：

<div id="item-{{ id }}"></div>

注意在 Vue.js 指令和特殊特性內不能用插值。不必擔心，如果 Mustache 標簽用錯了地方 Vue.js 會給出警告。

綁定表達式

放在 Mustache 標簽內的文本稱為綁定表達式。在 Vue.js 中，一段綁定表達式由一個簡單的 JavaScript 表達式和可選的一個或多個過濾器構成。

JavaScript 表達式

到目前為止，我們的模板只綁定到簡單的屬性鍵。不過實際上 Vue.js 在數據綁定內支持全功能的 JavaScript 表達式：

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

這些表達式將在所屬的 Vue 實例的作用域內計算。一個限制是每個綁定只能包含單個表達式，因此下面的語句是無效的：

<!-- 這是一個語句，不是一個表達式： -->{{ var a = 1 }}<!-- 流程控制也不可以，可改用三元表達式 -->{{ if (ok) { return message } }}

過濾器

Vue.js 允許在表達式后添加可選的“過濾器 (Filter) ”，以“管道符”指示：

{{ message | capitalize }}

這里我們將表達式 message 的值“管輸（pipe）”到內置的 capitalize 過濾器，這個過濾器其實只是一個 JavaScript 函數，返回大寫化的值。Vue.js 提供數個內置過濾器，在后面我們會談到如何開發自己的過濾器。

注意管道語法不是 JavaScript 語法，因此不能在表達式內使用過濾器，只能添加到表達式的后面。