Vue 3.0 模板語(yǔ)法

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

在底層的實(shí)現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)性系統(tǒng)，Vue 能夠智能地計(jì)算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。

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

#插值

#文本

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值：

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

Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)組件實(shí)例中 msg property 的值。無(wú)論何時(shí)，綁定的組件實(shí)例上 msg property 發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。

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

<span v-once>這個(gè)將不會(huì)改變: {{ msg }}</span>

#原始 HTML

雙大括號(hào)會(huì)將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

點(diǎn)擊此處實(shí)現(xiàn)

這個(gè) span 的內(nèi)容將會(huì)被替換成為 property 值 rawHtml，直接作為 HTML——會(huì)忽略解析 property 值中的數(shù)據(jù)綁定。注意，你不能使用 v-html 來(lái)復(fù)合局部模板，因?yàn)?Vue 不是基于字符串的模板引擎。反之，對(duì)于用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。

TIP

在你的站點(diǎn)上動(dòng)態(tài)渲染任意的 HTML 是非常危險(xiǎn)的，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值，絕不要將用戶提供的內(nèi)容作為插值。

#Attribute

Mustache 語(yǔ)法不能在 HTML attribute 中使用 ，然而，可以使用 v-bind 指令：

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

對(duì)于布爾 attribute (它們只要存在就意味著值為 true)，v-bind 工作起來(lái)略有不同，在這個(gè)例子中：

<button v-bind:disabled="isButtonDisabled">按鈕</button>

如果 isButtonDisabled 的值是 null 或 undefined，則 disabled attribute 甚至不會(huì)被包含在渲染出來(lái)的 <button> 元素中。

#使用 JavaScript 表達(dá)式

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

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

這些表達(dá)式會(huì)在當(dāng)前活動(dòng)實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個(gè)限制就是，每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面的例子都不會(huì)生效。

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

#指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 和 v-on 是例外情況，稍后我們?cè)儆懻?。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM?；仡櫸覀?cè)诮榻B中看到的例子：

<p v-if="seen">現(xiàn)在你看到我了</p>

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

#參數(shù)

一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML attribute：

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

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

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

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

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

#動(dòng)態(tài)參數(shù)

也可以在指令參數(shù)中使用 JavaScript 表達(dá)式，方法是用方括號(hào)括起來(lái)：

<!--
注意，參數(shù)表達(dá)式的寫(xiě)法存在一些約束，如之后的“對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約束”章節(jié)所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

這里的 attributeName 會(huì)被作為一個(gè) JavaScript 表達(dá)式進(jìn)行動(dòng)態(tài)求值，求得的值將會(huì)作為最終的參數(shù)來(lái)使用。例如，如果你的組件實(shí)例有一個(gè) data property attributeName，其值為 "href"，那么這個(gè)綁定將等價(jià)于 v-bind:href。

同樣地，你可以使用動(dòng)態(tài)參數(shù)為一個(gè)動(dòng)態(tài)的事件名綁定處理函數(shù)：

<a v-on:[eventName]="doSomething"> ... </a>

在這個(gè)示例中，當(dāng) eventName 的值為 "focus" 時(shí)，v-on:[eventName] 將等價(jià)于 v-on:focus

#修飾符

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

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

在接下來(lái)對(duì) v-on 和 v-for 等功能的探索中，你會(huì)看到修飾符的其它例子。

#縮寫(xiě)

v- 前綴作為一種視覺(jué)提示，用來(lái)識(shí)別模板中 Vue 特定的 attribute。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為 (dynamic behavior) 時(shí)，v- 前綴很有幫助，然而，對(duì)于一些頻繁用到的指令來(lái)說(shuō)，就會(huì)感到使用繁瑣。同時(shí)，在構(gòu)建由 Vue 管理所有模板的單頁(yè)面應(yīng)用程序 (SPA - single page application) 時(shí)，v- 前綴也變得沒(méi)那么重要了。因此，Vue 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫(xiě)：

#v-bind 縮寫(xiě)

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"> ... </a>
<!-- 縮寫(xiě) -->
<a :href="url"> ... </a>
<!-- 動(dòng)態(tài)參數(shù)的縮寫(xiě) -->
<a :[key]="url"> ... </a>

#v-on 縮寫(xiě)

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 縮寫(xiě) -->
<a @click="doSomething"> ... </a>
<!-- 動(dòng)態(tài)參數(shù)的縮寫(xiě) (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

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

從下一頁(yè)開(kāi)始，我們將在示例中使用縮寫(xiě)，因?yàn)檫@是 Vue 開(kāi)發(fā)者最常用的用法。

#注意事項(xiàng)

#對(duì)動(dòng)態(tài)參數(shù)值約定

動(dòng)態(tài)參數(shù)預(yù)期會(huì)求出一個(gè)字符串，異常情況下值為 null。這個(gè)特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會(huì)觸發(fā)一個(gè)警告。

#對(duì)動(dòng)態(tài)參數(shù)表達(dá)式約定

動(dòng)態(tài)參數(shù)表達(dá)式有一些語(yǔ)法約束，因?yàn)槟承┳址?，如空格和引?hào)，放在 HTML attribute 名里是無(wú)效的。例如：

<!-- 這會(huì)觸發(fā)一個(gè)編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

變通的辦法是使用沒(méi)有空格或引號(hào)的表達(dá)式，或用計(jì)算屬性替代這種復(fù)雜表達(dá)式。

在 DOM 中使用模板時(shí) (直接在一個(gè) HTML 文件里撰寫(xiě)模板)，還需要避免使用大寫(xiě)字符來(lái)命名鍵名，因?yàn)闉g覽器會(huì)把 attribute 名全部強(qiáng)制轉(zhuǎn)為小寫(xiě)：

<!--
在 DOM 中使用模板時(shí)這段代碼會(huì)被轉(zhuǎn)換為 `v-bind:[someattr]`。
除非在實(shí)例中有一個(gè)名為“someattr”的 property，否則代碼不會(huì)工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

#JavaScript 表達(dá)式

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