已经踏上复工的路途，到达小窝开始自我隔离中，不能外出那咱们就安心的继续学习吧(￣▽￣)"
image.png
最近正在学习前台框架vue，边学边笔记，O(∩_∩)O
今天学习到计算属性和监视，顺便记录一下
计算属性：
- 在 computed 属性对象中定义计算属性的方法
- 在页面中使用{{方法名}}来显示计算的结果
计算属性高级： - 通过 getter/setter 实现对属性数据的显示和监视
- 计算属性存在缓存, 多次读取只执行一次 getter
监视属性：
- 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行
编码：
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName">
名: <input type="text" placeholder="Last Name" v-model="lastName">
姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1">
姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2">
姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Kobe',
lastName: 'bryant',
fullName2: 'Kobe bryant'
},
computed: {
//什么时候执行：初始化显示/相关的data属性数据发生改变
fullName1: function () { //计算属性中的一个方法，方法的返回值作为属性值
console.log('fullName1()')
return this.firstName + " " + this.lastName
},
fullName3: {
//回调函数的三个特点：1.你定义的，2.你没有调用，3.但最终它执行了
//需要注意的：1.什么时候调用？2.用来做什么？
//回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get: function () {
return this.firstName + " " + this.lastName
},
//回调函数，当属性值发生改变时回调，更新相关的属性数据
set: function (value) { //value就是fullName3的最新属性值
var names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {//配置监视
lastName: function (newVal, oldVal) { //lastName发生了改变
this.fullName2 = this.firstName + ' ' + newVal
}
}
})
vm.$watch('firstName', function (val) { //firstName发生了改变
this.fullName2 = val + ' ' + this.lastName
})
