vue__双向数据绑定v-model

  1. 双向数据绑定是建立在单项数据绑定(model===view)的基础之上的
  2. 双向数据绑定的实现流程:
    a:  在解析v-model指令时 , 给当前元素添加input监听
    b:  当input的 value发生改变时, 将最新的值赋值给当前表达式对应的data属性
  3. v-model:绑定

  4. model:function(node,vm,exp){
      // 实现数据的初始化显示 和创建对应的 watcher
      this.bind(node,bm,exp,'model');
      var me = this,
      // 得到表达式的值
      val = this._gitVMVal(vm,exp)
      // 给节点绑定input事件监听(输入改变时)
      node.addEventListener('input',function(e){
        // 得到输入的最新值
        var newValue = e.target.value;
        // 如果没有变化, 直接结束
        if(val === newValue){
          return
        }
        // 将最新的value保存给表达式所对应的属性
        me._setVMVal(vm,exp,newValue);
        val = newValue
      })
    }
posted @ 2020-07-18 13:40  飞鸟和蝉-  阅读(243)  评论(0编辑  收藏  举报