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

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

实现功能如下：

① 通过v-model实现数据绑定

② 需要提供提示信息

③ 需要侦听器监听输入信息的变化

侦听器的用法：实际上是侦听指定数据的变化，当数据发生变化的时候，触发侦听器所绑定的函数，然后在函数中可以处理些异步的函数，并且可以随时修改状态的变化。

④ 需要修改触发的事件

使用lazy事件修饰符，将默认的input事件修改为change事件

<!-- 页面布局 -->
<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="js/vue.js"></script>
<script type="text/javascript">
    /*      
      侦听器
      1、采用侦听器监听用户名的变化
      2、调用后台接口进行验证
      3、根据验证的结果调整提示信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },
      methods: {
        checkName: function(uname) {
          // 调用接口，但是可以使用定时任务的方式模拟接口调用
          // 定时器里面的this指的是window，所以要保存一下vm对象的this  
          var that = this;
          setTimeout(function(){
            // 模拟接口调用
            if(uname == 'admin') {
              that.tip = '用户名已经存在，请更换一个';
            }else{
              that.tip = '用户名可以使用';
            }
          }, 2000);
        }
      },
      watch: {
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });
</script>