Vue.js 中的 v-bind 和 v-on 可以缩写成什么形式？

发表于 作者 IT之美

在 Vue.js 中,v-bind 和 v-on 可以缩写为:和@。

v-bind 缩写:

v-bind 用于动态绑定属性,缩写为 : 。
示例:

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

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

v-on 缩写:

v-on 用于绑定事件监听器,缩写为 @ 。
示例:

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

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

该缩写的原因是:

  1. 这两个语法糖在 Vue.js 中使用较为频繁,所以特别地提供了缩写。
  2. 缩写形式看上去更加简洁和直观。
  3. : 和 @ 作为特殊符号,不会与其他属性相冲突或产生歧义。

除此之外,Vue.js 为 v-bind 和 v-on 提供了 .prop 和 .native 修饰符。

.prop 用于把动态属性绑定到 DOM 的非根节点上。
示例:

html
<p>
  Host:  
  <span :[attrName]="hostName"></span>
</p>

.native 用于监听组件根元素的原生事件。
示例:

html
<my-component @click.native="doTheThing">...</my-component>

所以,理解 v-bind 和 v-on 的缩写及其修饰符的作用,可以让我们在 Vue.js 中编写出更简洁和高效的代码。