模板语法

Vue 模板是声明式地将 DOM 与底层组件实例数据绑定的 HTML。

插值表达式

文本插值

<span>{{ message }}</span>

JavaScript 表达式

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

每个绑定只能包含单个表达式，不支持语句和控制流。

指令

指令是带有 v- 前缀的特殊 attribute：

<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">链接</a>
<button v-on:click="doSomething">点击</button>

参数

某些指令支持参数，用冒号表示：

<a v-bind:href="url">...</a>
<button v-on:click="handler">...</button>

修饰符

修饰符是以点开头的特殊后缀，表示指令应以特殊方式绑定：

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

常见修饰符：

• .prevent - 调用 event.preventDefault()
• .stop - 调用 event.stopPropagation()
• .capture - 添加事件侦听器时使用 capture 模式

动态参数

<a v-bind:[attributeName]="url">...</a>
<button v-on:[eventName]="handler">...</button>

动态参数表达式有一些语法限制，避免使用空格和引号。

要点总结

• 插值表达式 {{ }} 用于文本绑定，支持单行 JavaScript 表达式
• 指令以 v- 开头，常用指令：v-if、v-bind、v-on
• 指令支持参数 : 和修饰符 . 扩展功能
• 动态参数使用方括号 v-bind:[key]