数据绑定语法

Vue.js 使用基于 DOM 的模板实现。这意味着所有 Vue.js 模板本质上都是有效的、可解析的 HTML，并增强了一些特殊属性。请记住这一点，因为这使得 Vue 模板在本质上不同于基于字符串的模板。

插值

文本

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

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

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

您还可以执行一次性插值，这些插值不会在数据更改时更新

<span>This will never change: {{* msg }}</span>

原始 HTML

双 Mustache 将数据解释为纯文本，而不是 HTML。为了输出真正的 HTML，您需要使用三 Mustache

<div>{{{ raw_html }}}</div>

内容将作为纯 HTML 插入 - 数据绑定将被忽略。如果您需要重用模板片段，您应该使用 部分。

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

属性

Mustache 也可以用在 HTML 属性中

<div id="item-{{ id }}"></div>

请注意，在 Vue.js 指令和特殊属性中不允许属性插值。不用担心，当 Mustache 用在错误的地方时，Vue.js 会为您发出警告。

绑定表达式

我们放在 Mustache 标签中的文本称为 **绑定表达式**。在 Vue.js 中，绑定表达式由一个 JavaScript 表达式组成，该表达式后面可以 optionally 跟着一个或多个过滤器。

JavaScript 表达式

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式将在拥有 Vue 实例的数据作用域中进行评估。一个限制是每个绑定只能包含 **一个单一表达式**，因此以下 **不会** 工作

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}
<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

过滤器

Vue.js 允许您在表达式的末尾附加可选的“过滤器”，用“管道”符号表示

{{ message | capitalize }}

这里我们通过内置的 capitalize 过滤器“管道” message 表达式的值，它实际上只是一个返回大写值的 JavaScript 函数。Vue.js 提供了许多内置过滤器，我们将在后面讨论如何编写自己的过滤器。

请注意，管道语法不是 JavaScript 语法的一部分，因此您不能在表达式中混合过滤器；您只能在表达式的末尾附加它们。

过滤器可以链接

{{ message | filterA | filterB }}

过滤器也可以接受参数

{{ message | filterA 'arg1' arg2 }}

过滤器函数始终接收表达式的值作为第一个参数。带引号的参数被解释为纯字符串，而没有引号的参数将被评估为表达式。这里，纯字符串 'arg1' 将作为第二个参数传递给过滤器，表达式 arg2 的值将被评估并作为第三个参数传递。

指令

指令是带有 v- 前缀的特殊属性。指令属性值应为 **绑定表达式**，因此上面提到的关于 JavaScript 表达式和过滤器的规则也适用于此。指令的作用是在表达式的值发生变化时，对 DOM 采取特殊行为。让我们回顾一下我们在介绍中看到的示例

<p v-if="greeting">Hello!</p>

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

参数

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

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

这里 href 是参数，它告诉 v-bind 指令将元素的 href 属性绑定到表达式 url 的值。您可能已经注意到，这与使用 href="{{url}}" 进行属性插值的效果相同：这是正确的，实际上，属性插值在内部被转换为 v-bind 绑定。

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

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

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

修饰符

修饰符是特殊的后缀，用点表示，表示指令应该以某种特殊方式绑定。例如，.literal 修饰符告诉指令将它的属性值解释为字面字符串，而不是表达式

<a v-bind:href.literal="/a/b/c"></a>

当然，这似乎毫无意义，因为我们可以直接使用 href="/a/b/c" 而不是使用指令。这里的示例只是为了演示语法。我们将在后面看到修饰符的更多实际应用。

简写

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

v-bind 简写

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
or
<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- shorthand -->
<button :disabled="someDynamicCondition">Button</button>

v-on 简写

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

它们可能看起来与普通的 HTML 有点不同，但所有 Vue.js 支持的浏览器都能正确解析它，并且它们不会出现在最终渲染的标记中。简写语法完全是可选的，但当您在后面学习更多关于它的用法时，您可能会喜欢它。