模版语法

模版语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

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

Attribute 绑定

v-bind​

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

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

v-bind 简写 ​

因为 v-bind 非常常用，我们提供了特定的简写语法：

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

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

动态绑定多个值

const objectOfAttrs = {
  id: "container",
  class: "wrapper",
};

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

​​ 使用 JavaScript 表达式

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

<div>{{ number + 1 }}</div>

<div>{{ ok ? 'YES' : 'NO' }}</div>

<div>{{ message.split('').reverse().join('') }}</div>

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

调用函数

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

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

指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。

一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

v-if 指令会基于表达式 seen 的值的真假来移除/插入 <p> 元素

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

v-on 指令，它将监听 DOM 事件：

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

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

参数 Arguments

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识

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

动态参数

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

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

修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

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

指令语法导图

在这里你可以直观地看到完整的指令语法：