Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。

在底層的實現(xiàn)上， Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上。

如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染（render）函數(shù)，使用可選的 JSX 語法。

插值

文本

數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：

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

Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上?msg?屬性的值。無論何時，綁定的數(shù)據(jù)對象上?msg?屬性發(fā)生了改變，插值處的內(nèi)容都會更新。

通過使用?v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上所有的數(shù)據(jù)綁定：

<span v-once>This will never change: {{ msg }}</span>

純 HTML

雙大括號會將數(shù)據(jù)解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用v-html?指令：

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

被插入的內(nèi)容都會被當(dāng)做 HTML —— 數(shù)據(jù)綁定會被忽略。注意，你不能使用?v-html?來復(fù)合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元。

你的站點上動態(tài)渲染的任意 HTML 可能會非常危險，因為它很容易導(dǎo)致?XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要對用戶提供的內(nèi)容插值。

屬性

Mustache 不能在 HTML 屬性中使用，應(yīng)使用?v-bind 指令：

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

這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

使用 JavaScript 表達(dá)式

迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數(shù)據(jù)綁定， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

這些表達(dá)式會在所屬 Vue 實例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達(dá)式，所以下面的例子都不會生效。

<!-- 這是語句，不是表達(dá)式 --> {{ var a = 1 }} <!-- 流控制也不會生效，請使用三元表達(dá)式 --> {{ if (ok) { return message } }}

模板表達(dá)式都被放在沙盒中，只能訪問全局變量的一個白名單，如?Math?和Date?。你不應(yīng)該在模板表達(dá)式中試圖訪問用戶定義的全局變量。

過濾器

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應(yīng)該被添加在mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}

Vue 2.x 中，過濾器只能在 mustache 綁定中使用。為了在指令綁定中實現(xiàn)同樣的行為，你應(yīng)該使用計算屬性。

過濾器函數(shù)總接受表達(dá)式的值作為第一個參數(shù)。

new Vue({// ... filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}} })

過濾器可以串聯(lián)：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：

{{ message | filterA('arg1', arg2) }}

這里，字符串?'arg1'?將傳給過濾器作為第二個參數(shù)，?arg2?表達(dá)式的值將被求值然后傳給過濾器作為第三個參數(shù)。

指令

指令（Directives）是帶有?v-?前綴的特殊屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了?v-for，之后再討論）。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時相應(yīng)地將某些行為應(yīng)用到 DOM 上。讓我們回顧一下在介紹里的例子：

<p v-if="seen">Now you see me</p>

這里，?v-if?指令將根據(jù)表達(dá)式?seen?的值的真假來移除/插入?<p>?元素。

參數(shù)

一些指令能接受一個“參數(shù)”，在指令后以冒號指明。例如，?v-bind?指令被用來響應(yīng)地更新 HTML 屬性：

<a v-bind:href="url"></a>

在這里?href?是參數(shù)，告知?v-bind?指令將該元素的?href?屬性與表達(dá)式?url?的值綁定。

另一個例子是?v-on?指令，它用于監(jiān)聽 DOM 事件：

<a v-on:click="doSomething">

在這里參數(shù)是監(jiān)聽的事件名。我們也會更詳細(xì)地討論事件處理。

修飾符

修飾符（Modifiers）是以半角句號?.?指明的特殊后綴，用于指出一個指定應(yīng)該以特殊方式綁定。例如，.prevent?修飾符告訴?v-on?指令對于觸發(fā)的事件調(diào)用event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

之后當(dāng)我們更深入地了解?v-on?與?v-model時，會看到更多修飾符的使用。

縮寫

v-?前綴在模板中是作為一個標(biāo)示 Vue 特殊屬性的明顯標(biāo)識。當(dāng)你使用 Vue.js 為現(xiàn)有的標(biāo)記添加動態(tài)行為時，它會很有用，但對于一些經(jīng)常使用的指令來說有點繁瑣。同時，當(dāng)搭建 Vue.js 管理所有模板的?SPA?時，v-?前綴也變得沒那么重要了。因此，Vue.js 為兩個最為常用的指令提供了特別的縮寫：

v-bind?縮寫

<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>

v-on?縮寫

<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>

它們看起來可能與普通的 HTML 略有不同，但?:?與?@?對于屬性名來說都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現(xiàn)在最終渲染的標(biāo)記。縮寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。

---

原文：?http://vuejs.org/guide/syntax.html

總結(jié)

以上是生活随笔為你收集整理的Vue.2.0.5-模板语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。