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

作者：凡人多烦事01 | 2024-04-15 15:39:40

踩

注释很详细，直接上代码

新增内容

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

源码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

效果演示

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/428647