模板语法

Vue 使用基于 HTML 的模板语法，允许你声明式地将渲染后的 DOM 绑定到底层组件实例的数据上。所有 Vue 模板都是语法有效的 HTML，可以通过符合规范的浏览器和 HTML 解析器进行解析。

在底层，Vue 将模板编译成高度优化的 JavaScript 代码。结合反应系统，Vue 能够智能地计算出需要重新渲染的最少组件数量，并在应用状态变化时应用最少的 DOM作。

如果你熟悉虚拟DOM的概念，并更喜欢JavaScript的强大功能，你也可以直接编写渲染函数而非模板，并可选支持JSX。不过请注意，它们的编译优化程度不及模板。

文本插值

最基本的数据绑定形式是使用“Mustache”语法（双卷括号）进行文本插值：

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

胡须标签将被替换为对应组件实例中的属性值。每当房产发生变化时，也会进行更新。
msg msg

原始的HTML

双胡子将数据解读为纯文本，而非HTML格式。要输出真实的 HTML，你需要使用 v-html 指令：

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

使用文本插值：<span style=“color： red”>这应该是red.
使用 v-html 指令：这应该是红色的。

这里我们遇到了新情况。你看到的这个属性叫做指令。指令前缀为 表示它们是 Vue 提供的特殊属性，正如你可能猜到的，它们对渲染后的 DOM 应用特殊的反应行为。这里，我们基本上是在说“保持该元素内部HTML与当前活跃实例的属性保持最新”。v-html v- rawHtml

将 的内容替换为属性的值，将其解释为纯 HTML——数据绑定被忽略。注意你不能用它来编写模板部分文件，因为Vue不是基于字符串的模板引擎。相反，组件被优先考虑为用户界面重用和组合的基本单位。span rawHtml v-html

安全警告
在网站上动态渲染任意 HTML 可能非常危险，因为这很容易导致 XSS 漏洞。仅用于可信内容，绝>不用于用户提供的内容。v-html

属性绑定

胡须不能在HTML属性中使用。相反，使用V-bind指令：

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

该指令指示 Vue 保持元素属性与组件属性的同步。如果绑定值为或，则该属性将从渲染元素中移除。v-bind id dynamicId null undefined

速记

由于 被广泛使用，它有专门的速写语法：v-bind

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

以 开头的属性可能看起来与普通 HTML 略有不同，但它实际上是属性名称的有效字符，所有支持 Vue 的浏览器都能正确解析它。此外，它们不会出现在最终渲染的标记中。简写语法是可选的，但你以后了解它的用法时，应该会很欣赏它。:

在本指南的其余部分，我们将在代码示例中使用简写语法，因为这是Vue开发者最常用的用法。

同名速记

• 仅支持3.4+

如果该属性与被绑定的 JavaScript 值的变量名相同，则语法可以进一步简化以省略该属性值：

<!-- same as :id="id" -->
<div :id></div>

<!-- this also works -->
<div v-bind:id></div>

这类似于 JavaScript 中宣告对象时的属性简写语法。注意，这个功能仅在 Vue 3.4 及以上版本中可用。

布尔属性

布尔属性是可以通过元素上的存在来指示真值或假值的属性。例如，disabled 是最常用的布尔属性之一。

v-bind在这种情况下，工作方式略有不同：

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

如果属性具有真实值，则会被包含在内。如果值为空字符串，也将包含该变量，保持与 的一致性。对于其他虚假值，属性将被省略。disabledisButtonDisabled<button disabled="">

动态绑定多属性

如果你有一个代表多个属性的 JavaScript 对象，看起来如下：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

你可以通过使用不带参数的函数将它们绑定到单个元素：v-bind

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

使用 JavaScript 表达式

到目前为止，我们只绑定了模板中的简单属性键。但Vue实际上支持所有数据绑定中JavaScript表达式的全部功能：

{{ number + 1 }}

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

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

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

这些表达式将在当前组件实例的数据范围内作为 JavaScript 进行评估。

在 Vue 模板中，JavaScript 表达式可用于以下位置：

• 文本内部插值（胡须）
• 在任何 Vue 指令的属性值中（以 开头的特殊属性）v-)

仅表达式

每个绑定只能包含一个表达式。表达式是一段可以被计算为值的代码。一个简单的检查是它是否可以在之后使用。return

因此，以下方法将不起作用：

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

调用函数

可以在绑定表达式中调用一个组件暴露方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

提示
绑定表达式内调用的函数每次组件更新都会被调用，因此不应有副作用，比如更改数据或触发异步作。

限制全球访问

模板表达式是沙箱式，只能访问有限的全局列表。该列表展示了常用的内置全局函数，如 和 。Math Date

未明确包含在列表中的全局文件，例如用户附加属性，将无法在模板表达式中访问。不过，你可以通过在 app.config.globalProperties 中添加所有 Vue 表达式，显式地为它们定义额外的全局函数。window

指令

指令是带有前缀的特殊属性。Vue 提供了许多内置指令，包括我们上面介绍的。v- v-htm lv-bind

指令属性值通常为单个JavaScript表达式（例外，和，后文将在各自章节中讨论）。指令的工作是在表达式值变化时被动地应用更新到DOM上。以v-if为例：v-for v-on v-slot

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

在这里，指令会根据表达式值的真实性来移除或插入该元素。v-if <p> seen

参数

有些指令可以接受一个“参数”，在指令名称后面用冒号表示。例如，指令用于被动更新HTML属性：v-bind

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

<!-- shorthand -->
<a :href="url"> ... </a>

这里， 是参数，指示指令将元素属性绑定为表达式的值。在速记中，论元之前的所有内容（即 ）都浓缩为一个字符。href v-bind href ur lv-bind: :

另一个例子是指令，它监听DOM事件：v-on

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

<!-- shorthand -->
<a @click="doSomething"> ... </a>

这里，论元是需要听的事件名称：。 有对应的简写，即字符。我们也会更详细地讨论事件处理。click v-on @

动态论证

也可以通过用方括号包裹指令参数来使用JavaScript表达式：

<!--
Note that there are some constraints to the argument expression,
as explained in the "Dynamic Argument Value Constraints" and "Dynamic Argument Syntax Constraints" sections below.
-->
<a v-bind:[attributeName]="url"> ... </a>

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

这里，将作为 JavaScript 表达式动态评估，其值将作为参数的最终值。例如，如果你的组件实例有一个数据属性，其值为 ，那么该绑定等价于 。attributeName attributeName "href" v-bind:href

同样，你也可以使用动态参数将处理程序绑定到动态事件名称：

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

<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>

在此例中，当 的值为时，将等价于 。eventName "focus" v-on:[eventName] v-on:focus

动态参数值约束

动态参数通常应值为字符串，例外。特殊值可以用来显式地移除绑定。任何其他非字符串值都会触发警告。null null

动态参数语法约束

动态参数表达式存在一些语法约束，因为某些字符，如空格和引号，在HTML属性名称中是无效的。例如，以下内容无效：

<!-- This will trigger a compiler warning. -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传递一个复杂的动态参数，最好使用计算性质，我们稍后会介绍。

使用DOM内模板（直接写入HTML文件的模板）时，也应避免使用大写字符命名键，因为浏览器会强制属性名改为小写：

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

上述内容将在 DOM 模板中转换为。如果你的组件有属性而不是 ，你的代码将无法正常工作。单文件组件中的模板不受此约束。:[someattr] someAttr someattr

修饰 符

修饰语是用点表示的特殊后缀，表示指令应以某种特殊方式绑定。例如，修饰语告诉指令在触发事件时调用：.preventv-onevent.preventDefault()

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