Vue的学习
计算属性和侦听器
下面是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<body>
<script src="js/vue.js"></script>
<div id="example">
<p>:Original message:"{{message}}"</p>
<p>Computed reverrsed message:"{{reversedMessage}}"</p>
</div>
<script>
var vm=new Vue({
el:'#example',
data:{
message:'hello'
},
computed:{
//计算属性的getter
reversedMessage:function(){
//this指向vm实例
{
return this.message.split('').reverse().join('')
}
}
})
console.log(vm.reversedMessage)
</script>
</body>
</head>
</html>
xiaoweirc
结果：
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：
console.log(vm.reversedMessage)// => 'olleH'
vm.message ='Goodbye'
console.log(vm.reversedMessage)// => 'eybdooG'
你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
网友评论