模闆語法

Vue 使用(yòng)一種基于 HTML 的模闆語法，使我們能(néng)夠聲明(míng)式地将其組件實例的數據綁定到(dào)呈現(xiàn)的 DOM 上(shàng)。所有的 Vue 模闆都是語法層面合法的 HTML，可以被符合規範的浏覽器和(hé) HTML 解析器解析。

在底層機制中，Vue 會(huì)将模闆編譯成高(gāo)度優化的 JavaScript 代碼。結合響應式系統，當應用(yòng)狀态變更時(shí)，Vue 能(néng)夠智能(néng)地推導出需要重新渲染的組件的最少數量，并應用(yòng)最少的 DOM 操作(zuò)。

如果你(nǐ)對(duì)虛拟 DOM 的概念比較熟悉，并且偏好(hǎo)直接使用(yòng) JavaScript，你(nǐ)也(yě)可以結合可選的 JSX 支持直接手寫渲染函數而不采用(yòng)模闆。但(dàn)請(qǐng)注意，這(zhè)将不會(huì)享受到(dào)和(hé)模闆同等級别的編譯時(shí)優化。

文(wén)本插值 ​

最基本的數據綁定形式是文(wén)本插值，它使用(yòng)的是“Mustache”語法 (即雙大(dà)括号)：

template

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

雙大(dà)括号标簽會(huì)被替換爲相應組件實例中 msg 屬性的值。同時(shí)每次 msg 屬性更改時(shí)它也(yě)會(huì)同步更新。

原始 HTML ​

雙大(dà)括号會(huì)将數據解釋爲純文(wén)本，而不是 HTML。若想插入 HTML，你(nǐ)需要使用(yòng) v-html 指令：

template

<p>Using text interpolation: {{ rawHtml }}</p>

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

Using text interpolation: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

這(zhè)裏我們遇到(dào)了(le)一個新的概念。這(zhè)裏看(kàn)到(dào)的 v-html attribute 被稱爲一個指令。指令由 v- 作(zuò)爲前綴，表明(míng)它們是一些(xiē)由 Vue 提供的特殊 attribute，你(nǐ)可能(néng)已經猜到(dào)了(le)，它們将爲渲染的 DOM 應用(yòng)特殊的響應式行爲。這(zhè)裏我們做的事(shì)情簡單來(lái)說就是：在當前組件實例上(shàng)，将此元素的 innerHTML 與 rawHtml 屬性保持同步。

span 的内容将會(huì)被替換爲 rawHtml 屬性的值，插值爲純 HTML——數據綁定将會(huì)被忽略。注意，你(nǐ)不能(néng)使用(yòng) v-html 來(lái)拼接組合模闆，因爲 Vue 不是一個基于字符串的模闆引擎。在使用(yòng) Vue 時(shí)，應當使用(yòng)組件作(zuò)爲 UI 重用(yòng)和(hé)組合的基本單元。

Attribute 綁定 ​

雙大(dà)括号不能(néng)在 HTML attributes 中使用(yòng)。想要響應式地綁定一個 attribute，應該使用(yòng) v-bind 指令：

template

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

v-bind 指令指示 Vue 将元素的 id attribute 與組件的 dynamicId 屬性保持一緻。如果綁定的值是 null 或者 undefined，那麽該 attribute 将會(huì)從(cóng)渲染的元素上(shàng)移除。

簡寫 ​

因爲 v-bind 非常常用(yòng)，我們提供了(le)特定的簡寫語法：

template

<div :id="dynamicId"></div>

開(kāi)頭爲 : 的 attribute 可能(néng)和(hé)一般的 HTML attribute 看(kàn)起來(lái)不太一樣，但(dàn)它的确是合法的 attribute 名稱字符，并且所有支持 Vue 的浏覽器都能(néng)正确解析它。此外(wài)，他(tā)們不會(huì)出現(xiàn)在最終渲染的 DOM 中。簡寫語法是可選的，但(dàn)相信在你(nǐ)了(le)解了(le)它更多的用(yòng)處後，你(nǐ)應該會(huì)更喜歡它。

接下(xià)來(lái)的指引中，我們都将在示例中使用(yòng)簡寫語法，因爲這(zhè)是在實際開(kāi)發中更常見的用(yòng)法。

布爾型 Attribute ​

布爾型 attribute 依據 true / false 值來(lái)決定 attribute 是否應該存在于該元素上(shàng)。disabled 就是最常見的例子之一。

v-bind 在這(zhè)種場景下(xià)的行爲略有不同：

<button :disabled="isButtonDisabled">Button</button>

當 isButtonDisabled 爲真值或一個空(kōng)字符串 (即 <button disabled="">) 時(shí)，元素會(huì)包含這(zhè)個 disabled attribute。而當其爲其他(tā)假值時(shí) attribute 将被忽略。

動态綁定多個值 ​

如果你(nǐ)有像這(zhè)樣的一個包含多個 attribute 的 JavaScript 對(duì)象：

js

data() {

return {

objectOfAttrs: {

id: 'container',

class: 'wrapper'

}

}

}

通過不帶參數的 v-bind，你(nǐ)可以将它們綁定到(dào)單個元素上(shàng)：

template

<div v-bind="objectOfAttrs"></div>

使用(yòng) JavaScript 表達式 ​

至此，我們僅在模闆中綁定了(le)一些(xiē)簡單的屬性名。但(dàn)是 Vue 實際上(shàng)在所有的數據綁定中都支持完整的 JavaScript 表達式：

template

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

這(zhè)些(xiē)表達式都會(huì)被作(zuò)爲 JavaScript ，以當前組件實例爲作(zuò)用(yòng)域解析執行。

在 Vue 模闆内，JavaScript 表達式可以被使用(yòng)在如下(xià)場景上(shàng)：

在文(wén)本插值中 (雙大(dà)括号)

在任何 Vue 指令 (以 v- 開(kāi)頭的特殊 attribute) attribute 的值中

僅支持表達式 ​

每個綁定僅支持單一表達式，也(yě)就是一段能(néng)夠被求值的 JavaScript 代碼。一個簡單的判斷方法是是否可以合法地寫在 return 後面。

因此，下(xià)面的例子都是無效的：

template

<!-- 這(zhè)是一個語句，而非表達式 -->

{{ var a = 1 }}

<!-- 條件控制也(yě)不支持，請(qǐng)使用(yòng)三元表達式 -->

{{ if (ok) { return message } }}

調用(yòng)函數 ​

可以在綁定的表達式中使用(yòng)一個組件暴露的方法：

template

<span :title="toTitleDate(date)">

{{ formatDate(date) }}

</span>

受限的全局訪問 ​

模闆中的表達式将被沙盒化，僅能(néng)夠訪問到(dào)有限的全局對(duì)象列表。該列表中會(huì)暴露常用(yòng)的内置全局對(duì)象，比如 Math 和(hé) Date。

沒有顯式包含在列表中的全局對(duì)象将不能(néng)在模闆内表達式中訪問，例如用(yòng)戶附加在 window 上(shàng)的屬性。然而，你(nǐ)也(yě)可以自(zì)行在 app.config.globalProperties 上(shàng)顯式地添加它們，供所有的 Vue 表達式使用(yòng)。

指令 Directives ​

指令是帶有 v- 前綴的特殊 attribute。Vue 提供了(le)許多内置指令，包括上(shàng)面我們所介紹的 v-bind 和(hé) v-html。

指令 attribute 的期望值爲一個 JavaScript 表達式 (除了(le)少數幾個例外(wài)，即之後要讨論到(dào)的 v-for、v-on 和(hé) v-slot)。一個指令的任務是在其表達式的值變化時(shí)響應式地更新 DOM。以 v-if 爲例：

template

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

這(zhè)裏，v-if 指令會(huì)基于表達式 seen 的值的真假來(lái)移除/插入該 <p> 元素。

參數 Arguments ​

某些(xiē)指令會(huì)需要一個“參數”，在指令名後通過一個冒号隔開(kāi)做标識。例如用(yòng) v-bind 指令來(lái)響應式地更新一個 HTML attribute：

template

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

<!-- 簡寫 -->

<a :href="url"> ... </a>

這(zhè)裏 href 就是一個參數，它告訴 v-bind 指令将表達式 url 的值綁定到(dào)元素的 href attribute 上(shàng)。在簡寫中，參數前的一切 (例如 v-bind:) 都會(huì)被縮略爲一個 : 字符。

另一個例子是 v-on 指令，它将監聽 DOM 事(shì)件：

template

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

<!-- 簡寫 -->

<a @click="doSomething"> ... </a>

這(zhè)裏的參數是要監聽的事(shì)件名稱：click。v-on 有一個相應的縮寫，即 @ 字符。我們之後也(yě)會(huì)讨論關于事(shì)件處理(lǐ)的更多細節。

動态參數 ​

同樣在指令參數上(shàng)也(yě)可以使用(yòng)一個 JavaScript 表達式，需要包含在一對(duì)方括号内：

<!--

注意，參數表達式有一些(xiē)約束，

參見下(xià)面“動态參數值的限制”與“動态參數語法的限制”章節的解釋

-->

<a v-bind:[attributeName]="url"> ... </a>

<!-- 簡寫 -->

<a :[attributeName]="url"> ... </a>

這(zhè)裏的 attributeName 會(huì)作(zuò)爲一個 JavaScript 表達式被動态執行，計(jì)算(suàn)得到(dào)的值會(huì)被用(yòng)作(zuò)最終的參數。舉例來(lái)說，如果你(nǐ)的組件實例有一個數據屬性 attributeName，其值爲 "href"，那麽這(zhè)個綁定就等價于 v-bind:href。

相似地，你(nǐ)還可以将一個函數綁定到(dào)動态的事(shì)件名稱上(shàng)：

template

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

<!-- 簡寫 -->

<a @[eventName]="doSomething">

在此示例中，當 eventName 的值是 "focus" 時(shí)，v-on:[eventName] 就等價于 v-on:focus。

動态參數值的限制 ​

動态參數中表達式的值應當是一個字符串，或者是 null。特殊值 null 意爲顯式移除該綁定。其他(tā)非字符串的值會(huì)觸發警告。

動态參數語法的限制 ​

動态參數表達式因爲某些(xiē)字符的緣故有一些(xiē)語法限制，比如空(kōng)格和(hé)引号，在 HTML attribute 名稱中都是不合法的。例如下(xià)面的示例：

<!-- 這(zhè)會(huì)觸發一個編譯器警告 -->

<a :['foo' + bar]="value"> ... </a>

如果你(nǐ)需要傳入一個複雜(zá)的動态參數，我們推薦使用(yòng)計(jì)算(suàn)屬性替換複雜(zá)的表達式，也(yě)是 Vue 最基礎的概念之一，我們很(hěn)快(kuài)就會(huì)講到(dào)。

當使用(yòng) DOM 内嵌模闆 (直接寫在 HTML 文(wén)件裏的模闆) 時(shí)，我們需要避免在名稱中使用(yòng)大(dà)寫字母，因爲浏覽器會(huì)強制将其轉換爲小(xiǎo)寫：

template

<a :[someAttr]="value"> ... </a>

上(shàng)面的例子将會(huì)在 DOM 内嵌模闆中被轉換爲 :[someattr]。如果你(nǐ)的組件擁有 “someAttr” 屬性而非 “someattr”，這(zhè)段代碼将不會(huì)工(gōng)作(zuò)。單文(wén)件組件内的模闆不受此限制。

修飾符 Modifiers ​

修飾符是以點開(kāi)頭的特殊後綴，表明(míng)指令需要以一些(xiē)特殊的方式被綁定。例如 .prevent 修飾符會(huì)告知(zhī) v-on 指令對(duì)觸發的事(shì)件調用(yòng) event.preventDefault()：

template

<form @submit.prevent="onSubmit">...</form>

之後在講到(dào) v-on 和(hé) v-model 的功能(néng)時(shí)，你(nǐ)将會(huì)看(kàn)到(dào)其他(tā)修飾符的例子。