Vue（二）-- 计算属性，监视
计算属性
注意：里面的this都是代表vue实例（vm对象）
- 在computed属性对象中定义计算属性的方法
- 在页面中使用{{方法名}}来显示计算的结果
计算属性中的方法的返回值将作为属性值显示
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName1"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
},
computed:{
//什么时候执行：初始化显示/相关的data属性数据发生改变
fullName1 (){
console.log('fullName1()')
return this.firstName+' '+this.lastName
}
}
})
</script>
</body>
--1.1回调函数复习
- 什么事回调函数：1.自己定义的 2.没有调用 3.在一定条件下自动执行
- 回调函数：是么时候调用，用来作什么
--1.2计算高级属性
- 通过getter/setter实现对属性数据的显示和监视
- getter：属性的get方法
- setter: 属性的set方法
- 计算属性存在缓存，多次读取只执行一次getter计算
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName3"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
fullName3:{
//计算并返回当前属性的值
get(){//计算属性中的一个方法，方法的返回值作为属性值
return this.firstName+' '+this.lastName
},
//监视当前属性值得变化，当属性值发生改变时回调，更新相关的属性数据
set(value){//value就是fullname3的最新属性值
var names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
</body>
2.监视
=所有vm实例的方法都以$开头=
- 监视的作用：监视data里面的属性，并可以控制属性的值
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName2"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
watch:{
firstName:function(value){
this.fullName2 = value +" "+this.lastName
}
}
})
app.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
</script>
</body>
