Vue 侦听器

侦听器的应用场景：

数据变化时执行异步或开销较大的操作。

数据一旦发生了变化就通知侦听器所绑定的方法。

 1 <!-- vue 侦听器 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 </head>
11 <body>
12 <div id='app'>
13 
14     <div>姓：<input v-model="firstName"></input></div>
15     <div>名：<input v-model="lastName"></input></div>
16     <div>全名：<input v-model="fullName"></input></div>
17 
18 </div>
19 
20 <script>
21     var vm = new Vue ({
22         el:'#app',
23         data:{
24             firstName:'jim',
25             lastName:'Green',
26             fullName:'Jim Green'
27         },
28         methods: {
29 
30         },
31     //    侦听器
32         watch:{
33             firstName: function (value) {
34                 this.fullName = value + ' ' + this.lastName
35             },
36             lastName: function(value) {
37                 this.fullName =   this.firstName + ' ' + value 
38     }
39         }
40     })
41 </script>
42 </body>
43 </html>

案例：验证用户名是否可用

 1 <!-- vue 侦听器 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6   <meta charset="UTF-8">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9   <title>Document</title>
10   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11 </head>
12 
13 <body>
14   <div id='app'>
15 
16     <div>用户名：<input type="text" v-model="name"><span v-text="msg"></span></div>
17 
18   </div>
19 
20   <script>
21     var vm = new Vue({
22       el: '#app',
23       data: {
24         name: '',
25         msg: '123'
26       },
27       methods: {
28 
29       },
30       //    侦听器
31       watch: {
32         name: function (value) {
33           var that = this
34           //    数据变化调用后台接口验证用户名合法性
35           //    模拟接口调用
36           setTimeout(function () {
37             if (value === 'admin') {
38               that.msg = '用户名已经存在，请更换一个'
39             } else {
40               that.msg = '用户名可以使用'
41             }
42           }, 2000)
43           //    修改提示
44           this.msg = '正在验证'
45         }
46       }
47     })
48   </script>
49 </body>
50 
51 </html>