文本插值

文本插值是最基本的数据绑定形式，双大括号

示例：

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

原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，使用 v-html 指令

示例：

<span v-html="rawHtml"></span>

Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

示例：

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

简写

示例：

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

同名简写（名称与绑定的 JavaScript 值的名称相同）

示例：

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

布尔型 Attribute

依据 true / false 值来决定 attribute 是否应该存在于该元素上，例如：disabled。

示例：

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

动态绑定多个值（绑定一个对象）。

示例：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

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

使用 JavaScript 表达式

数据绑定中都支持完整的 JavaScript 表达式：

示例：

{{ number + 1 }}

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

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

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

模板中可以使用JavaScript 表达式的场景有：

1、在文本插值中 (双大括号)

2、在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。以下代码无效。

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

可以在绑定的表达式中使用一个组件暴露的方法。

示例：

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

指令 Directives

带有 v- 前缀的特殊 attribute 叫做指令。常见的指令有：v-bind，v-html，v-for，v-if等。

示例：

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

带有参数 Arguments

指令名后通过一个冒号隔开做标识

示例：

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

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

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

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

动态参数

示例：

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

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

说明：如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。

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

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

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