Vue 使用一(yī)種基于 HTML 的模闆語法，使我們能(néng)夠聲明(míng)式地(dì)将其組件實例的數(shù)據綁定到呈現的 DOM 上(shàng)。所有的 Vue 模闆都(dōu)是語法層面合法的 HTML，可(kě)以被符合規範的浏覽器和(hé) HTML 解析器解析。
在底層機制中，Vue 會将模闆編譯成高度優化的 JavaScript 代碼。結合響應式系統，當應用狀态變更時(shí)，Vue 能(néng)夠智能(néng)地(dì)推導出需要(yào)重新渲染的組件的最少(shǎo)數(shù)量，并應用最少(shǎo)的 DOM 操作(zuò)。
如(rú)果你對虛拟 DOM 的概念比較熟悉，并且偏好直接使用 JavaScript，你也可(kě)以結合可(kě)選的 JSX 支持直接手寫渲染函數(shù)而不采用模闆。但(dàn)請(qǐng)注意，這(zhè)将不會享受到和(hé)模闆同等級别的編譯時(shí)優化。
文本插值
最基本的數(shù)據綁定形式是文本插值，它使用的是“Mustache”語法 (即雙大括号)：
template
<span>Message: {{ msg }}</span>
雙大括号标簽會被替換為(wèi)相應組件實例中 msg 屬性的值。同時(shí)每次 msg 屬性更改時(shí)它也會同步更新。
原始 HTML
雙大括号會将數(shù)據解釋為(wèi)純文本，而不是 HTML。若想插入 HTML，你需要(yào)使用 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è)裏我們遇到了(le)一(yī)個新的概念。這(zhè)裏看(kàn)到的 v-html attribute 被稱為(wèi)一(yī)個指令。指令由 v- 作(zuò)為(wèi)前綴，表明(míng)它們是一(yī)些由 Vue 提供的特殊 attribute，你可(kě)能(néng)已經猜到了(le)，它們将為(wèi)渲染的 DOM 應用特殊的響應式行(xíng)為(wèi)。這(zhè)裏我們做(zuò)的事情簡單來說就是：在當前組件實例上(shàng)，将此元素的 innerHTML 與 rawHtml 屬性保持同步。
span 的內(nèi)容将會被替換為(wèi) rawHtml 屬性的值，插值為(wèi)純 HTML——數(shù)據綁定将會被忽略。注意，你不能(néng)使用 v-html 來拼接組合模闆，因為(wèi) Vue 不是一(yī)個基于字符串的模闆引擎。在使用 Vue 時(shí)，應當使用組件作(zuò)為(wèi) UI 重用和(hé)組合的基本單元。
Attribute 綁定
雙大括号不能(néng)在 HTML attributes 中使用。想要(yào)響應式地(dì)綁定一(yī)個 attribute，應該使用 v-bind 指令：
template
<div v-bind:id="dynamicId"></div>
v-bind 指令指示 Vue 将元素的 id attribute 與組件的 dynamicId 屬性保持一(yī)緻。如(rú)果綁定的值是 null 或者 undefined，那(nà)麽該 attribute 将會從(cóng)渲染的元素上(shàng)移除。
簡寫
因為(wèi) v-bind 非常常用，我們提供了(le)特定的簡寫語法：
template
<div :id="dynamicId"></div>
開(kāi)頭為(wèi) : 的 attribute 可(kě)能(néng)和(hé)一(yī)般的 HTML attribute 看(kàn)起來不太一(yī)樣，但(dàn)它的确是合法的 attribute 名稱字符，并且所有支持 Vue 的浏覽器都(dōu)能(néng)正确解析它。此外(wài)，他(tā)們不會出現在最終渲染的 DOM 中。簡寫語法是可(kě)選的，但(dàn)相信在你了(le)解了(le)它更多的用處後，你應該會更喜歡它。
接下(xià)來的指引中，我們都(dōu)将在示例中使用簡寫語法，因為(wèi)這(zhè)是在實際開(kāi)發中更常見(jiàn)的用法。
布爾型 Attribute
布爾型 attribute 依據 true / false 值來決定 attribute 是否應該存在于該元素上(shàng)。disabled 就是最常見(jiàn)的例子之一(yī)。
v-bind 在這(zhè)種場景下(xià)的行(xíng)為(wèi)略有不同：
<button :disabled="isButtonDisabled">Button</button>
當 isButtonDisabled 為(wèi)真值或一(yī)個空字符串 (即 <button disabled="">) 時(shí)，元素會包含這(zhè)個 disabled attribute。而當其為(wèi)其他(tā)假值時(shí) attribute 将被忽略。
動态綁定多個值
如(rú)果你有像這(zhè)樣的一(yī)個包含多個 attribute 的 JavaScript 對象：
js
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
通(tōng)過不帶參數(shù)的 v-bind，你可(kě)以将它們綁定到單個元素上(shàng)：
template
<div v-bind="objectOfAttrs"></div>
使用 JavaScript 表達式
至此，我們僅在模闆中綁定了(le)一(yī)些簡單的屬性名。但(dàn)是 Vue 實際上(shàng)在所有的數(shù)據綁定中都(dōu)支持完整的 JavaScript 表達式：
template
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
這(zhè)些表達式都(dōu)會被作(zuò)為(wèi) JavaScript ，以當前組件實例為(wèi)作(zuò)用域解析執行(xíng)。
在 Vue 模闆內(nèi)，JavaScript 表達式可(kě)以被使用在如(rú)下(xià)場景上(shàng)：
在文本插值中 (雙大括号)
在任何 Vue 指令 (以 v- 開(kāi)頭的特殊 attribute) attribute 的值中
僅支持表達式
每個綁定僅支持單一(yī)表達式，也就是一(yī)段能(néng)夠被求值的 JavaScript 代碼。一(yī)個簡單的判斷方法是是否可(kě)以合法地(dì)寫在 return 後面。
因此，下(xià)面的例子都(dōu)是無效的：
template
<!-- 這(zhè)是一(yī)個語句，而非表達式 -->
{{ var a = 1 }}
<!-- 條件控制也不支持，請(qǐng)使用三元表達式 -->
{{ if (ok) { return message } }}
調用函數(shù)
可(kě)以在綁定的表達式中使用一(yī)個組件暴露的方法：
template
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
受限的全局訪問(wèn)
模闆中的表達式将被沙盒化，僅能(néng)夠訪問(wèn)到有限的全局對象列表。該列表中會暴露常用的內(nèi)置全局對象，比如(rú) Math 和(hé) Date。
沒有顯式包含在列表中的全局對象将不能(néng)在模闆內(nèi)表達式中訪問(wèn)，例如(rú)用戶附加在 window 上(shàng)的屬性。然而，你也可(kě)以自(zì)行(xíng)在 app.config.globalProperties 上(shàng)顯式地(dì)添加它們，供所有的 Vue 表達式使用。
指令 Directives
指令是帶有 v- 前綴的特殊 attribute。Vue 提供了(le)許多內(nèi)置指令，包括上(shàng)面我們所介紹的 v-bind 和(hé) v-html。
指令 attribute 的期望值為(wèi)一(yī)個 JavaScript 表達式 (除了(le)少(shǎo)數(shù)幾個例外(wài)，即之後要(yào)讨論到的 v-for、v-on 和(hé) v-slot)。一(yī)個指令的任務是在其表達式的值變化時(shí)響應式地(dì)更新 DOM。以 v-if 為(wèi)例：
template
<p v-if="seen">Now you see me</p>
這(zhè)裏，v-if 指令會基于表達式 seen 的值的真假來移除/插入該 <p> 元素。
參數(shù) Arguments
某些指令會需要(yào)一(yī)個“參數(shù)”，在指令名後通(tōng)過一(yī)個冒号隔開(kāi)做(zuò)标識。例如(rú)用 v-bind 指令來響應式地(dì)更新一(yī)個 HTML attribute：
template
<a v-bind:href="url"> ... </a>
<!-- 簡寫 -->
<a :href="url"> ... </a>
這(zhè)裏 href 就是一(yī)個參數(shù)，它告訴 v-bind 指令将表達式 url 的值綁定到元素的 href attribute 上(shàng)。在簡寫中，參數(shù)前的一(yī)切 (例如(rú) v-bind:) 都(dōu)會被縮略為(wèi)一(yī)個 : 字符。
另一(yī)個例子是 v-on 指令，它将監聽 DOM 事件：
template
<a v-on:click="doSomething"> ... </a>
<!-- 簡寫 -->
<a @click="doSomething"> ... </a>
這(zhè)裏的參數(shù)是要(yào)監聽的事件名稱：click。v-on 有一(yī)個相應的縮寫，即 @ 字符。我們之後也會讨論關于事件處理的更多細節。
動态參數(shù)
同樣在指令參數(shù)上(shàng)也可(kě)以使用一(yī)個 JavaScript 表達式，需要(yào)包含在一(yī)對方括号內(nèi)：
<!--
注意，參數(shù)表達式有一(yī)些約束，
參見(jiàn)下(xià)面“動态參數(shù)值的限制”與“動态參數(shù)語法的限制”章(zhāng)節的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>
這(zhè)裏的 attributeName 會作(zuò)為(wèi)一(yī)個 JavaScript 表達式被動态執行(xíng)，計算得到的值會被用作(zuò)最終的參數(shù)。舉例來說，如(rú)果你的組件實例有一(yī)個數(shù)據屬性 attributeName，其值為(wèi) "href"，那(nà)麽這(zhè)個綁定就等價于 v-bind:href。
相似地(dì)，你還可(kě)以将一(yī)個函數(shù)綁定到動态的事件名稱上(shàng)：
template
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 簡寫 -->
<a @[eventName]="doSomething">
在此示例中，當 eventName 的值是 "focus" 時(shí)，v-on:[eventName] 就等價于 v-on:focus。
動态參數(shù)值的限制
動态參數(shù)中表達式的值應當是一(yī)個字符串，或者是 null。特殊值 null 意為(wèi)顯式移除該綁定。其他(tā)非字符串的值會觸發警告。
動态參數(shù)語法的限制
動态參數(shù)表達式因為(wèi)某些字符的緣故有一(yī)些語法限制，比如(rú)空格和(hé)引号，在 HTML attribute 名稱中都(dōu)是不合法的。例如(rú)下(xià)面的示例：
<!-- 這(zhè)會觸發一(yī)個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>
如(rú)果你需要(yào)傳入一(yī)個複雜(zá)的動态參數(shù)，我們推薦使用計算屬性替換複雜(zá)的表達式，也是 Vue 最基礎的概念之一(yī)，我們很(hěn)快(kuài)就會講到。
當使用 DOM 內(nèi)嵌模闆 (直接寫在 HTML 文件裏的模闆) 時(shí)，我們需要(yào)避免在名稱中使用大寫字母，因為(wèi)浏覽器會強制将其轉換為(wèi)小寫：
template
<a :[someAttr]="value"> ... </a>
上(shàng)面的例子将會在 DOM 內(nèi)嵌模闆中被轉換為(wèi) :[someattr]。如(rú)果你的組件擁有 “someAttr” 屬性而非 “someattr”，這(zhè)段代碼将不會工(gōng)作(zuò)。單文件組件內(nèi)的模闆不受此限制。
修飾符 Modifiers
修飾符是以點開(kāi)頭的特殊後綴，表明(míng)指令需要(yào)以一(yī)些特殊的方式被綁定。例如(rú) .prevent 修飾符會告知 v-on 指令對觸發的事件調用 event.preventDefault()：
template
<form @submit.prevent="onSubmit">...</form>
之後在講到 v-on 和(hé) v-model 的功能(néng)時(shí)，你将會看(kàn)到其他(tā)修飾符的例子。
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發