模版语法
模版语法
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
文本插值
最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):
js
<span>Message: {{ msg }}</span>
Attribute 绑定
v-bind
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute,应该使用 v-bind 指令:
js
<div v-bind:id="dynamicId"></div>
v-bind 简写
因为 v-bind 非常常用,我们提供了特定的简写语法:
html
<!-- same as :id="id" -->
<div :id></div>
<!-- this also works -->
<div v-bind:id></div>
动态绑定多个值
js
const objectOfAttrs = {
id: "container",
class: "wrapper",
};
html
<div v-bind="objectOfAttrs"></div>
使用 JavaScript 表达式
Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式:
html
<div>{{ number + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ message.split('').reverse().join('') }}</div>
<div :id="`list-${id}`"></div>
调用函数
可以在绑定的表达式中使用一个组件暴露的方法:
html
<time :title="toTitleDate(date)" :datetime="date">
{{ formatDate(date) }}
</time>
指令 Directives
指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令,包括上面我们所介绍的 v-bind 和 v-html。
一个指令的任务是在其表达式的值变化时响应式地更新 DOM。
v-if
指令会基于表达式 seen 的值的真假来移除/插入 <p>
元素
html
<p v-if="seen">Now you see me</p>
v-on
指令,它将监听 DOM 事件:
html
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
参数 Arguments
某些指令会需要一个“参数”,在指令名后通过一个冒号隔开做标识
html
<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>
动态参数
html
<!--
注意,参数表达式有一些约束,
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
修饰符 Modifiers
修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault():
html
<form @submit.prevent="onSubmit">...</form>
指令语法导图
在这里你可以直观地看到完整的指令语法: