Vue.js 2 提供了一些语法糖(syntactic sugar)来简化常见的操作。以下是一些 Vue.js 2 中常用的语法糖:
-
v-bind 简写:
<!-- 完整语法 --> <a v-bind:href="url">Link</a> <!-- 简写 --> <a :href="url">Link</a>
-
v-on 简写:
<!-- 完整语法 --> <button v-on:click="doSomething">Click me</button> <!-- 简写 --> <button @click="doSomething">Click me</button>
@click
是v-on:click
的缩写形式,用于绑定事件处理函数。 -
v-model 简写:
<!-- 完整语法 --> <input v-model="message"> <!-- 简写 --> <input :value="message" @input="message = $event">
v-model
的简写形式是使用:value
和@input
结合。 -
计算属性的简写:
// 完整语法 computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } // 简写 computed: { fullName() { return this.firstName + ' ' + this.lastName } }
在计算属性中,你可以省略
function
关键字。 -
方法的简写:
// 完整语法 methods: { sayHello: function () { alert('Hello!') } } // 简写 methods: { sayHello() { alert('Hello!') } }
在方法中,你也可以省略
function
关键字。
这些语法糖可以让 Vue.js 的代码更加简洁和易读。当然,这只是一小部分语法糖,Vue.js 还提供了其他一些方便的缩写和功能,让你更高效地开发应用。