數據綁定語法 · vue

--- title: 數據綁定語法 type: guide order: 4 --- Vue.js 的模板是基于 DOM 實現的。這意味著所有的 Vue.js 模板都是可解析的有效的 HTML，且通過一些特殊的特性做了增強。Vue 模板因而從根本上不同于基于字符串的模板，請記住這點。 ## 插值 ### 文本數據綁定最基礎的形式是文本插值，使用 "Mustache" 語法（雙大括號）： ``` html <span>Message: {{ msg }}</span> ``` Mustache 標簽會被相應數據對象的 `msg` 屬性的值替換。每當這個屬性變化時它也會更新。你也可以只處理單次插值，今后的數據變化就不會再引起插值更新了： ``` html <span>This will never change: {{* msg }}</span> ``` ### 原始的 HTML 雙 Mustache 標簽將數據解析為純文本而不是 HTML。為了輸出真的 HTML 字符串，需要用三 Mustache 標簽： ``` html <div>{{{ raw_html }}}</div> ``` 內容以 HTML 字符串插入——數據綁定將被忽略。如果需要復用模板片斷，應當使用 [partials](/api/#partial)。 <p class="tip">在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 [XSS 攻擊](https://en.wikipedia.org/wiki/Cross-site_scripting)。記住，只對可信內容使用 HTML 插值，**永不**用于用戶提交的內容。</p> ### HTML 特性 Mustache 標簽也可以用在 HTML 特性 (Attributes) 內： ``` html <div id="item-{{ id }}"></div> ``` 注意在 Vue.js 指令和特殊特性內不能用插值。不必擔心，如果 Mustache 標簽用錯了地方 Vue.js 會給出警告。 ## 綁定表達式放在 Mustache 標簽內的文本稱為**綁定表達式**。在 Vue.js 中，一段綁定表達式由一個簡單的 JavaScript 表達式和可選的一個或多個過濾器構成。 ### JavaScript 表達式到目前為止，我們的模板只綁定到簡單的屬性鍵。不過實際上 Vue.js 在數據綁定內支持全功能的 JavaScript 表達式： ``` html {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} ``` 這些表達式將在所屬的 Vue 實例的作用域內計算。一個限制是每個綁定只能包含**單個表達式**，因此下面的語句是**無效**的： ``` html  {{ var a = 1 }}  {{ if (ok) { return message } }} ``` ### 過濾器 Vue.js 允許在表達式后添加可選的“過濾器 (Filter) ”，以“管道符”指示： ``` html {{ message | capitalize }} ``` 這里我們將表達式 `message` 的值“管輸（pipe）”到內置的 `capitalize` 過濾器，這個過濾器其實只是一個 JavaScript 函數，返回大寫化的值。Vue.js 提供數個內置過濾器，在后面我們會談到如何開發自己的過濾器。注意管道語法不是 JavaScript 語法，因此不能在表達式內使用過濾器，只能添加到表達式的后面。過濾器可以串聯： ``` html {{ message | filterA | filterB }} ``` 過濾器也可以接受參數： ``` html {{ message | filterA 'arg1' arg2 }} ``` 過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算。這里，字符串 `'arg1'` 將傳給過濾器作為第二個參數，表達式 `arg2` 的值在計算出來之后作為第三個參數。 ## 指令指令 (Directives) 是特殊的帶有前綴 `v-` 的特性。指令的值限定為**綁定表達式**，因此上面提到的 JavaScript 表達式及過濾器規則在這里也適用。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。我們來回頭看下“概述”里的例子： ``` html <p v-if="greeting">Hello!</p> ``` 這里 `v-if` 指令將根據表達式 `greeting` 值的真假刪除/插入 `<p>` 元素。 ### 參數有些指令可以在其名稱后面帶一個“參數” (Argument)，中間放一個冒號隔開。例如，`v-bind` 指令用于響應地更新 HTML 特性： ``` html <a v-bind:href="url"></a> ``` 這里 `href` 是參數，它告訴 `v-bind` 指令將元素的 `href` 特性跟表達式 `url` 的值綁定。可能你已注意到可以用特性插值 `{% raw %}href="{{url}}"{% endraw %}` 獲得同樣的結果：這樣沒錯，并且實際上在內部特性插值會轉為 `v-bind` 綁定。另一個例子是 `v-on` 指令，它用于監聽 DOM 事件： ``` html <a v-on:click="doSomething"> ``` Here the argument is the event name to listen to. We will talk about event handling in more details too. 這里參數是被監聽的事件的名字。我們也會詳細說明事件綁定。 ### 修飾符修飾符 (Modifiers) 是以半角句號 `.` 開始的特殊后綴，用于表示指令應當以特殊方式綁定。例如 `.literal` 修飾符告訴指令將它的值解析為一個字面字符串而不是一個表達式： ``` html <a v-bind:href.literal="/a/b/c"></a> ``` 當然，這似乎沒有意義，因為我們只需要使用 `href="/a/b/c"` 而不必使用一個指令。這個例子只是為了演示語法。后面我們將看到修飾符更多的實踐用法。 ## 縮寫 `v-` 前綴是一種標識模板中特定的 Vue 特性的視覺暗示。當你需要在一些現有的 HTML 代碼中添加動態行為時，這些前綴可以起到很好的區分效果。但你在使用一些常用指令的時候，你會感覺一直這么寫實在是啰嗦。而且在構建單頁應用時，Vue.js 會管理所有的模板，此時 `v-` 前綴也沒那么重要了。因此Vue.js 為兩個最常用的指令 `v-bind` 和 `v-on` 提供特別的縮寫： ### `v-bind` 縮寫 ``` html  <a v-bind:href="url"></a>  <a :href="url"></a>  <button v-bind:disabled="someDynamicCondition">Button</button>  <button :disabled="someDynamicCondition">Button</button> ``` ### `v-on` 縮寫 ``` html  <a v-on:click="doSomething"></a>  <a @click="doSomething"></a> ``` 它們看起來跟“合法”的 HTML 有點不同，但是它們在所有 Vue.js 支持的瀏覽器中都能被正確地解析，并且不會出現在最終渲染的標記中。縮寫語法完全是可選的，不過隨著一步步學習的深入，你會慶幸擁有它們。