div id="app">
h1 @click="add">{{msg}}</h1>
!-- <h1 @click="obj.a++">{{obj.a}}</h1>
h1 @click="obj.b++">{{obj.b}}</h1> -->
h1>{{obj}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el:"#app",
data:function (){
return {
msg:'你好',
obj:{
a:0,
b:0
}
}
},
/* 因为vue不是操作dom了,视图的变化是根据数据来的 */
/* 对数据进行实时监控的方法 监听器 */
watch:{
/* handler是数据msg 发生变化的时候触发的方法 */
msg:{
immediate:true,
handler:function(newVal,oldVal){
console.log('新值:'+newVal);
console.log('旧值:'+oldVal);
}
}
/* 对象里面的key 最传统的方式其实就是要加引号 */
// 'obj.a':{
// immediate:true,
// handler:function(newV,oldV){
// console.log('a',newV,oldV);
// }
// },
// 'obj.b':{
// immediate:true,
// handler:function(newV,oldV){
// console.log('b',newV,oldV);
// }
// },
// obj:{
// immediate:true,
// handler:function(newV,oldV){
/* newV.a会报错使用 newV是一个变量 */
// console.log('obj',newV['a'],oldV['b']);
// },
// /* 深度监听对象里面的属性值 */
// /* 深度监听 对象里面的值每次发生变化都会触发handler方法 */
// /* 因为对象是引用数据类型,所以
// 每次值发生变化,对应的内存地址并没有发生变化,所以newV
// 和oldV都是同一个 */
// deep:true
// }
},
methods:{
add(){
/* this.msg = 'hello' */
/* console.log(this.obj); */
/* this.obj.c = '123' */
/* this.$set(this.obj,'c','123') */
/* delete this.obj.a */
/* this.$delete(this.obj,'a') */
}
}
})
</script>