vue快速入门（二十三）侦听器的简单写法与完整写法-编程知识

vue快速入门（二十三）侦听器的简单写法与完整写法

注释很详细，直接上代码

新增内容

侦听器简单写法侦听对象或属性
侦听器完整写法侦听对象（可选深度侦听）

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 挂载点 --><div id="root"><div>第一个被侦听的数据对象：<input type="text" v-model="value1"></div><div>第二个被侦听的数据对象（以下为监听对象的三个属性）：</div><div>姓名：<input type="text" v-model="value2.name"></div><div>年龄：<input type="text" v-model="value2.age"></div><div>性别：<input type="text" v-model="value2.sex"></div>
</div><!-- 导入vue的js代码：不会下载的看专栏第一篇 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据value1:'',value2:{name:'',age:'',sex:''}},methods: {// 方法},computed:{// 计算属性},watch:{// 侦听器// 简单写法，侦听某个数据//如果是侦听对象的某个属性，可以写成'value2.name'（单引号是必须的）value1(newValue,oldValue){console.log(newValue)},// 完整写法，可以侦听对象value2:{handler(newValue,oldValue){console.log(newValue)//打印的是对象},deep:true,// 是否深度侦听，启用以后当对象的属性改变时，也会触发侦听器immediate:true// 是否立即执行侦听器，启用以后，页面刷新会立即执行侦听器}}})</script>
</body></html>