vue模板语法

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用

v-bind 指令

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

指令

指令（directives）是带有v- 前缀的特殊属性，指令属性的值预期是单个 JavaScript 表达式

<p v-if="seen">现在你看到我了</p>

这里 v-if 指令 会根据表达式 seen 的值的真假来插入/移除 p元素

参数

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

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

在这里href 是参数 告诉v-bind 指令将该元素的herf属性和表达式url 的值绑定

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

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

在这里参数是监听的事件名

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

缩写

v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

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

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

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