Close
升级到 Vue 3 | Vue 2 EOL

指南

模板语法

Vue.js 使用基于 HTML 的模板语法，允许您将渲染的 DOM 声明性地绑定到底层 Vue 实例的数据。所有 Vue.js 模板都是有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在幕后，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应式系统，Vue 能够智能地找出需要重新渲染的组件数量，并在应用程序状态发生变化时应用最少的 DOM 操作。

如果您熟悉虚拟 DOM 概念并喜欢 JavaScript 的原始力量，您也可以直接编写渲染函数而不是模板，并可选地支持 JSX。

插值

文本

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

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

Mustache 标签将被替换为对应数据对象上 msg 属性的值。当数据对象的 msg 属性发生变化时，它也会更新。

您也可以使用v-once 指令执行一次性插值，这些插值不会在数据更改时更新，但请记住，这也会影响同一节点上的任何其他绑定

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

原始 HTML

双 Mustache 将数据解释为纯文本，而不是 HTML。为了输出真实的 HTML，您需要使用v-html 指令

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

使用 Mustache：{{ rawHtml }}

使用 v-html 指令：

span 的内容将被替换为 rawHtml 属性的值，解释为纯 HTML - 数据绑定将被忽略。请注意，您不能使用 v-html 来组合模板片段，因为 Vue 不是基于字符串的模板引擎。相反，组件是 UI 重用和组合的基本单元。

在您的网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致XSS 漏洞。仅对可信内容使用 HTML 插值，并且**绝不**对用户提供的内容使用。

属性

Mustache 不能在 HTML 属性内使用。相反，请使用v-bind 指令

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

在布尔属性的情况下，它们的存在意味着 true，v-bind 的工作方式略有不同。在这个例子中

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

如果 isButtonDisabled 的值为 null、undefined 或 false，则 disabled 属性甚至不会包含在渲染的 <button> 元素中。

使用 JavaScript 表达式

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

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

这些表达式将在拥有 Vue 实例的数据范围内作为 JavaScript 评估。一个限制是每个绑定只能包含**一个单一表达式**，因此以下内容**不会**工作

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

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

模板表达式是沙盒化的，并且只能访问白名单全局变量，例如 Math 和 Date。您不应该尝试在模板表达式中访问用户定义的全局变量。

指令

指令是带有 v- 前缀的特殊属性。指令属性值应为**单个 JavaScript 表达式**（v-for 除外，我们将在后面讨论）。指令的作用是在表达式值发生变化时对 DOM 产生反应性副作用。让我们回顾一下我们在介绍中看到的示例

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

在这里，v-if 指令将根据表达式 seen 的真值删除/插入 <p> 元素。

参数

一些指令可以接受一个“参数”，用指令名称后的冒号表示。例如，v-bind 指令用于反应性地更新 HTML 属性

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

这里 href 是参数，它告诉 v-bind 指令将元素的 href 属性绑定到表达式 url 的值。

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

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

这里参数是监听的事件名称。我们也会详细讨论事件处理。

动态参数

2.6.0+ 中的新功能

从 2.6.0 版本开始，也可以通过用方括号括起来在指令参数中使用 JavaScript 表达式

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

这里 attributeName 将被动态地评估为 JavaScript 表达式，其评估值将用作参数的最终值。例如，如果您的 Vue 实例具有一个数据属性 attributeName，其值为 "href"，则此绑定将等效于 v-bind:href。

类似地，您可以使用动态参数将处理程序绑定到动态事件名称

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

在这个例子中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等效于 v-on:focus。

动态参数值约束

动态参数应评估为字符串，null 除外。特殊值 null 可用于显式删除绑定。任何其他非字符串值都会触发警告。

动态参数表达式约束

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

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

解决方法是使用不带空格或引号的表达式，或者用计算属性替换复杂的表达式。

在使用 DOM 内模板（即直接在 HTML 文件中编写的模板）时，还应避免使用大写字母命名键，因为浏览器会将属性名称强制转换为小写。

<!--
This will be converted to v-bind:[someattr] in in-DOM templates.
Unless you have a "someattr" property in your instance, your code won't work.
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

修饰符是使用点号表示的特殊后缀，它们指示指令应该以某种特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令在触发事件时调用 event.preventDefault()

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

您将在后面看到其他修饰符示例，用于 v-on 和 用于 v-model，当我们探索这些功能时。

简写

v- 前缀用作视觉提示，用于识别模板中的 Vue 特定属性。当您使用 Vue.js 对某些现有标记应用动态行为时，这很有用，但对于一些常用的指令来说，它可能感觉冗长。同时，当您构建一个 SPA 时，对 v- 前缀的需求变得不那么重要，因为 Vue 管理每个模板。因此，Vue 为两个最常用的指令 v-bind 和 v-on 提供了特殊的简写形式。

v-bind 简写

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

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

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 简写

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

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

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们可能看起来与普通的 HTML 有点不同，但 : 和 @ 是属性名称的有效字符，所有 Vue 支持的浏览器都可以正确解析它。此外，它们不会出现在最终渲染的标记中。简写语法完全是可选的，但当您稍后了解其用法时，您可能会喜欢它。

← Vue 实例 计算属性和侦听器 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。