# 模板語法
Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，[直接寫渲染（render）函數](https://vuefe.cn/guide/render-function.html)，使用可選的 JSX 語法。
[](https://vuefe.cn/guide/syntax.html#插值)
## [](https://vuefe.cn/guide/syntax.html#插值)[](https://vuefe.cn/guide/syntax.html#插值 "插值")插值
[](https://vuefe.cn/guide/syntax.html#文本)
### [](https://vuefe.cn/guide/syntax.html#文本)[](https://vuefe.cn/guide/syntax.html#文本 "文本")文本
數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：
~~~
<span>Message: {{ msg }}</span>
~~~
Mustache 標簽將會被替代為對應數據對象上?`msg`?屬性的值。無論何時，綁定的數據對象上?`msg`?屬性發生了改變，插值處的內容都會更新。
通過使用?[v-once 指令](https://vuefe.cn/api/#v-once)，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：
~~~
<span v-once>This will never change: {{ msg }}</span>
~~~
[](https://vuefe.cn/guide/syntax.html#純-HTML)
### [](https://vuefe.cn/guide/syntax.html#純-HTML)[](https://vuefe.cn/guide/syntax.html#純-HTML "純 HTML")純 HTML
雙大括號會將數據解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用?`v-html`?指令：
~~~
<div v-html="rawHtml"></div>
~~~
被插入的內容都會被當做 HTML —— 數據綁定會被忽略。注意，你不能使用?`v-html`?來復合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔任 UI 重用與復合的基本單元。
你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致?[XSS 攻擊](https://en.wikipedia.org/wiki/Cross-site_scripting)。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容插值。
[](https://vuefe.cn/guide/syntax.html#屬性)
### [](https://vuefe.cn/guide/syntax.html#屬性)[](https://vuefe.cn/guide/syntax.html#屬性 "屬性")屬性
Mustache 不能在 HTML 屬性中使用，應使用?[v-bind 指令](https://vuefe.cn/api/#v-bind)：
~~~
<div v-bind:id="dynamicId"></div>
~~~
這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會被移除：
~~~
<button v-bind:disabled="someDynamicCondition">Button</button>
~~~
[](https://vuefe.cn/guide/syntax.html#使用-JavaScript-表達式)
### [](https://vuefe.cn/guide/syntax.html#使用-JavaScript-表達式)[](https://vuefe.cn/guide/syntax.html#使用-JavaScript-表達式 "使用 JavaScript 表達式")使用 JavaScript 表達式
迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數據綁定， Vue.js 都提供了完全的 JavaScript 表達式支持。
~~~
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
~~~
這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。
~~~
<!-- 這是語句，不是表達式 -->{{ var a = 1 }}<!-- 流控制也不會生效，請使用三元表達式 -->{{ if (ok) { return message } }}
~~~
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如?`Math`?和?`Date`?。你不應該在模板表達式中試圖訪問用戶定義的全局變量。
[](https://vuefe.cn/guide/syntax.html#過濾器)
### [](https://vuefe.cn/guide/syntax.html#過濾器)[](https://vuefe.cn/guide/syntax.html#過濾器 "過濾器")過濾器
Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應該被添加在?mustache 插值的尾部，由“管道符”指示：
~~~
{{ message | capitalize }}
~~~
Vue 2.x 中，過濾器只能在 mustache 綁定中使用。為了在指令綁定中實現同樣的行為，你應該使用[計算屬性](https://vuefe.cn/guide/computed.html)。
過濾器函數總接受表達式的值作為第一個參數。
~~~
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) }}
~~~
這里，字符串?`'arg1'`?將傳給過濾器作為第二個參數，?`arg2`?表達式的值將被求值然后傳給過濾器作為第三個參數。
[](https://vuefe.cn/guide/syntax.html#指令)
## [](https://vuefe.cn/guide/syntax.html#指令)[](https://vuefe.cn/guide/syntax.html#指令 "指令")指令
指令（Directives）是帶有?`v-`?前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式（除了?`v-for`，之后再討論）。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。讓我們回顧一下在介紹里的例子：
~~~
<p v-if="seen">Now you see me</p>
~~~
這里，?`v-if`?指令將根據表達式?`seen`?的值的真假來移除/插入?`<p>`?元素。
[](https://vuefe.cn/guide/syntax.html#參數)
### [](https://vuefe.cn/guide/syntax.html#參數)[](https://vuefe.cn/guide/syntax.html#參數 "參數")參數
一些指令能接受一個“參數”，在指令后以冒號指明。例如，?`v-bind`?指令被用來響應地更新 HTML 屬性：
~~~
<a v-bind:href="url"></a>
~~~
在這里?`href`?是參數，告知?`v-bind`?指令將該元素的?`href`?屬性與表達式?`url`?的值綁定。
另一個例子是?`v-on`?指令，它用于監聽 DOM 事件：
~~~
<a v-on:click="doSomething">
~~~
在這里參數是監聽的事件名。我們也會更詳細地討論事件處理。
[](https://vuefe.cn/guide/syntax.html#修飾符)
### [](https://vuefe.cn/guide/syntax.html#修飾符)[](https://vuefe.cn/guide/syntax.html#修飾符 "修飾符")修飾符
修飾符（Modifiers）是以半角句號?`.`?指明的特殊后綴，用于指出一個指定應該以特殊方式綁定。例如，`.prevent`?修飾符告訴?`v-on`?指令對于觸發的事件調用?`event.preventDefault()`：
~~~
<form v-on:submit.prevent="onSubmit"></form>
~~~
|
之后當我們更深入地了解?`v-on`?與?`v-model`時，會看到更多修飾符的使用。
[](https://vuefe.cn/guide/syntax.html#縮寫)
## [](https://vuefe.cn/guide/syntax.html#縮寫)[](https://vuefe.cn/guide/syntax.html#縮寫 "縮寫")縮寫
`v-`?前綴在模板中是作為一個標示 Vue 特殊屬性的明顯標識。當你使用 Vue.js 為現有的標記添加動態行為時，它會很有用，但對于一些經常使用的指令來說有點繁瑣。同時，當搭建 Vue.js 管理所有模板的?[SPA](https://en.wikipedia.org/wiki/Single-page_application)?時，`v-`?前綴也變得沒那么重要了。因此，Vue.js 為兩個最為常用的指令提供了特別的縮寫：
[](https://vuefe.cn/guide/syntax.html#v-bind-縮寫)
### [](https://vuefe.cn/guide/syntax.html#v-bind-縮寫)[](https://vuefe.cn/guide/syntax.html#v-bind-縮寫 "v-bind 縮寫")`v-bind`?縮寫
~~~
<!-- 完整語法 --><a v-bind:href="url"></a><!-- 縮寫 --><a :href="url"></a>
~~~
[](https://vuefe.cn/guide/syntax.html#v-on-縮寫)
### [](https://vuefe.cn/guide/syntax.html#v-on-縮寫)[](https://vuefe.cn/guide/syntax.html#v-on-縮寫 "v-on 縮寫")`v-on`?縮寫
~~~
<!-- 完整語法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>
~~~
它們看起來可能與普通的 HTML 略有不同，但?`:`?與?`@`?對于屬性名來說都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記。縮寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。
