Vue框架之侦听器

◆ 侦听器：

• 使用watch来响应数据的变化
• 一般用于异步或者开销较大的操作
• watch 中的属性 一定是data 中 已经存在的数据
• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

<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>

◆ 侦听器示例：

<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) {
        // 调用接口，但是可以使用定时任务的方式模拟接口调用
        var that = this;
        setTimeout(function(){
          // 模拟接口调用
          if(uname == 'admin') {
            that.tip = '用户名已经存在，请更换一个';
          }else{
            that.tip = '用户名可以使用';
          }
        }, 2000);
      }
    },
    watch: {
      uname: function(val){
        // 调用后台接口验证用户名的合法性
        this.checkName(val);
        // 修改提示信息
        this.tip = '正在验证...';
      }
    }
  });

</script>