Vue入门指南——侦听器-蒲公英云

Vue入门指南——侦听器

小鱼儿 2023-07-02 07:26 83阅读 0赞

一、什么是侦听器？

侦听器是用来检测数据变化从而来添加执行自己自定义逻辑的代码（数据一旦发生变化就通知侦听器所绑定方法）。这一点和计算属性很相似,然而计算属性一般作用于简单的一些小逻辑代码,如果逻辑比较复杂可以使用侦听器。

二、侦听器的应用场景

一般用于异步或者开销较大的操作（如 ajax，计时器等一些耗时操作）

三、侦听器的用法

<div id="app">
        <div>
            <span>名：</span>
            <span>
        <input type="text" v-model='firstName'>
      </span>
        </div>
        <div>
            <span>姓：</span>
            <span>
        <input type="text" v-model='lastName'>
      </span>
        </div>
        <div>{ { fullName}}</div>
    </div>
  <script type="text/javascript">
        /* 侦听器 */
        var vm = new Vue({ 
            el: '#app',
            data: { 
                firstName: 'Jim',
                lastName: 'Green',
                // fullName: 'Jim Green'
            },
             //watch 属性 定义 和 data 已经 methods 平级 
            watch: { 
                // 注意： 这里firstName 对应着data 中的 firstName 
                // 当 firstName 值 改变的时候 会自动触发 watch
                firstName: function(val) { 
                    this.fullName = val + ' ' + this.lastName;
                },
                // 注意： 这里 lastName 对应着data 中的 lastName 
                lastName: function(val) { 
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

四、小案例（验证用户名是否可用）

需求：输入框中输入姓名，失去焦点时验证是否存在，如果已
经存在，提示从新输入，如果不存在，提示可以使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>用户名：</span>
      <span>
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{ { tip}}</span>
    </div>
  </div>
  <script type="text/javascript" src="./lib/vue.js"></script>
  <script type="text/javascript">
    /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */
    var vm = new Vue({ 
      el: '#app',
      data: { 
        uname: '',
        tip: ''
      },
      methods: { 
        checkName: function(uname) { 
          // 调用接口，但是可以使用定时任务的方式模拟接口调用
          var that = this;
          setTimeout(function(){ 
            // 模拟接口调用
            if(uname == 'admin') { 
              that.tip = '用户名已经存在，请更换一个';
            }else{ 
              that.tip = '用户名可以使用';
            }
          }, 2000);
        }
      },
      watch: { 
        uname: function(val){ 
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });
  </script>
</body>
</html>