# 4、侦听器 * [侦听器](https://www.kancloud.cn/zheng1234/vuejs/2393768#_1) * [1.侦听器的应用场景](https://www.kancloud.cn/zheng1234/vuejs/2393768#1_4) * [2、侦听器的用法 （vue 的 属性 watch 监听）](https://www.kancloud.cn/zheng1234/vuejs/2393768#2__vue____watch____7) * [案例:验证用户名是否可用 (重点)](https://www.kancloud.cn/zheng1234/vuejs/2393768#____22) * [案例:需求分析](https://www.kancloud.cn/zheng1234/vuejs/2393768#_27) # 侦听器  ## 1.侦听器的应用场景 数据变化时执行异步或开销较大的操作 ## 2、侦听器的用法 （vue 的 属性 watch 监听） ~~~ watch: { firstName: function (val) { // val表示变化之后的值 this. fullName = val + this. lastName ; }, lastName: function (val) { this. fullName = this. firstName + val; } } ~~~  # 案例:验证用户名是否可用 (重点)  需求:输入框中输入姓名,**失去焦点时**验证是否存在,如果已 经存在,提示从新输入,如果不存在,提示可以使用。 ## 案例:需求分析 ①通过v-model实现数据绑定 ②需要提供提示信息 **③需要侦听器监听输入信息的变化** ④需要修改触发的事件 ~~~ <div id=" app"> <div> <span>用户名: </span> <span> <input type=" text" v-model= ' uname ' > </span> <span>{{tip}}</span> </div> </div> <script type="text/ javascript" src="js/vue. js"></script> <script type="text/ javascript"> /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */ varvm=newVue({ el :#app”, data: { uname: ' ', tip: ' ' , }, methods: { checkName: func t ion(uname) { //调用接口，但是可以使用定时任务的方式模拟接口调用 var that = this; setT imeout( function( ){ //模拟接口调用 if (uname == 'admin') { that. tip = '用户名已经存在，请更换一个"; }else{ that.tip =”用户名可以使用" } },2000); } }, watch: { uname: function(val){ //调用后台接口验证用户名的合法性 this . checkName(val) ; //修改提示信息 this. tip = '正在验证..."; } } }); </script> ~~~