**

vue侦听器应用场景之处理异步操作

**
具体我们通过验证用户名的可用性，来演示监听器的用法。

验证用户名，一般用于注册用户，例如各大博客网站等，你注册一个账号，后台要先验证一下，你这个账号是不是已经被别人注册过了。如果这个账号已经被使用了就给您一个提示-“该用户名已经被使用，请更换用户名“，如果该账号没有被使用，就可以正常注册了。

思考…如何实现这样一个功能呢。

首先，我们要进行数据的绑定：

<div id="app">
    <div>
      <span>用户名：</span>
      <span>
        //通过.lazy修改触发方式
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>

var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },

接下来，来讲解比较重要的一步，如何通过侦听器监听输入信息的变化。
分三步来完成：

1. 采用侦听器监听用户名的变化
2. 调用后台接口进行验证
3. 根据验证的结果调整提示信息

var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },
      methods: {
        checkName: function(uname) {
          // 调用接口，但是可以使用定时任务的方式模拟接口调用
          // setTimeout中的this指的是window
          // 所以呢，我们要在外面缓存一下this
          var that = this;
          setTimeout(function(){
            // 模拟接口调用
            if(uname == 'admin') {
              
              that.tip = '用户名已经存在，请更换一个';
            }else{
              that.tip = '用户名可以使用';
            }
          }, 2000);
        }
      },
      // 第一步添加侦听器的功能
      watch: {
        // 括号里的参数就是输入的用户名，取个名字叫val
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });

到此，我们的vue侦听器应用场景之处理异步操作就讲解结束了。

分享到：

赞(0) 打赏