vuejs缩写

v- 是 vuejs 的一种特有前缀, 以区分你当前正在使用 vue, 但对于常用的指令, 频繁的写下 v- 显然不是一个好的方式, vue 为绑定 css 属性, 以及 js 方法提供了简便的缩写, 分别是

• v-bind : 绑定 css 属性
• v-on : 绑定 js方法

v-bind 缩写

在使用 v-bind 且存在参数时, 使用 : 替代

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

在使用 v-on 且存在参数时, 使用 @ 替代

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。