v-bind
?缩写
1 <!-- 完整语法 -->
2 <a v-bind:href="url">...</a>
3
4 <!-- 缩写 -->
5 <a :href="url">...</a>
?v-on
?缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: ‘#example‘,data: {
message: ‘Hello‘
},computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘‘).reverse().join(‘‘)
}
}
})
?
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要?message
?还没有发生改变,多次访问?reversedMessage
?计算属性会立即返回之前的计算结果,而不必再次执行函数。