Vue的學(xué)習(xí)
計(jì)算屬性和偵聽器
下面是一個(gè)簡單的例子
<!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:{
//計(jì)算屬性的getter
reversedMessage:function(){
//this指向vm實(shí)例
{
return this.message.split('').reverse().join('')
}
}
})
console.log(vm.reversedMessage)
</script>
</body>
</head>
</html>
xiaoweirc
結(jié)果：
Original message: "Hello"
Computed reversed message: "olleH"
這里我們聲明了一個(gè)計(jì)算屬性?reversedMessage。我們提供的函數(shù)將用作屬性?vm.reversedMessage?的 getter 函數(shù)：
console.log(vm.reversedMessage)// => 'olleH'
vm.message ='Goodbye'
console.log(vm.reversedMessage)// => 'eybdooG'
你可以打開瀏覽器的控制臺，自行修改例子中的 vm。vm.reversedMessage?的值始終取決于?vm.message?的值。
你可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性。Vue 知道?vm.reversedMessage?依賴于?vm.message，因此當(dāng)?vm.message?發(fā)生改變時(shí)，所有依賴?vm.reversedMessage?的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計(jì)算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的，這使它更易于測試和理解。
