10《Vue 入门教程》Vue 双向绑定指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了10《Vue 入门教程》Vue 双向绑定指令相关的知识,希望对你有一定的参考价值。

参考技术A

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model 。 v-model 的学习相对简单。我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

2. 木子解释

用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值,同样可以根据绑定值的改变来操作页面 DOM 的更新。

3. 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

3.1 单行文本 input

实例演示

Document

名称是: name

12345678910111213141516171819202122232425

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给输入框 input 和 name 形成双向绑定,当 input 中数据发生改变时 name 也会发生改变。同理,我们在控制台通过 vm.name = "" 给 name 赋值时输入框的内容也会发生改变。

3.2 多行文本 textarea

实例演示

Document

描述是: desc

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定,当 textarea 中数据发生改变时 desc 也会发生改变。同理,我们在控制台通过 vm.desc = "" 给 desc 赋值时输入框的内容也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定,当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理,我们在控制台通过 vm.isDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定,当任意 checkbox 改变选中状态时 types 也会发生改变。同理,我们在控制台通过 vm.types = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定,当 radio 改变选中状态时 isFree 也会发生改变。同理,我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释: 上述代码,我们通过 v-model 给选择框 select 和 company 形成双向绑定,当 select 改变选项时 company 也会发生改变。同理,我们在控制台通过 vm.company = 0 给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

代码解释: 上述代码中,我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值,当选中时 vm.isDelivery === \'yes\' ,当没有选中时 vm.isDelivery === \'no\'

代码解释: 上述代码中,我们通过 v-bind:value 给 randio 指定选中的值,当 radio 选中时 vm.pick === vm.a 。

代码解释: 上述代码中,我们通过 v-bind:value 给 option 指定 value 值,当 该 option 选中时 vm.selected 的值为 number: 123 。

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用,主要包括以下知识点:

手写vue双向绑定数据

来一张原理图:

技术图片

实现思路:

  (1)绑定data 种的数据,为每个数据添加指令。通过Object,defineProperty() 来通知属性是否更改

  (2) 找到每个DOM节点的指令。绑定事件。并绑定watcher

  (3)  实现DOM事件改变之后, 响应data数据,实现视图更新

技术图片
<!DocType>
<html>
  <title>vue 的双向绑定事件</title>
  <body id="app">
    <input type="text" v-model="number"/>
    <span v-bind="number"></span>
    <input type="text" v-model="age"/>
    <span v-bind="age"></span>
  </body>
   
<script>
  function Vue (options) {
     this._init(options);
  }
  
  Vue.prototype._init = function (options) {
    this.$data = options.data;
    this.$methods = options.data.methods;
    this.$el = document.querySelector(options.el);
    this.$methods = options.methods;
    this.$key = ‘‘;
    
    this._binding = {};
    
    // 观测数据
    this._observer(this.$data);
    
    this._complie(this.$el);
    
    // this._test(this.$data);
  }
  
  // 观测数据
  Vue.prototype._observer = function (obj) {
    var value;
    let _this = this;
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        this._binding[key] = {                                                                                                                                                          
          _directives: []
        };
        value = obj[key];
        if (typeof value === ‘object‘) {
          this._observer(value);
        }
        Object.defineProperty(this.$data, key, {
          enumerable: true,
          configurable: true,
          get: function () {
            console.log(`获取${value}`, key);
            return value;
          },
          set: function (newVal) {
            console.log(‘key:‘, key, _this.$key);
            if (value !== newVal) {
              value = newVal;
              _this._binding[_this.$key]._directives.forEach(function (item, index) {
                item.update();
              })
            }
          }
        })
      }
    }
  }
  
  // 为DOM节点添加指令事件
  Vue.prototype._complie = function (root) {
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      if (node.children.length) {
        this._complie(node);
      }

      if (node.hasAttribute(‘v-click‘)) {
        node.onclick = (function () {
          var attrVal = nodes[i].getAttribute(‘v-click‘);
          return _this.$methods[attrVal].bind(_this.$data);
        })();
      }

      if (node.hasAttribute(‘v-model‘) && (node.tagName == ‘INPUT‘ || node.tagName == ‘TEXTAREA‘)) {
        node.addEventListener(‘input‘, (function(key) {
          var attrVal = node.getAttribute(‘v-model‘);
          _this._binding[attrVal]._directives.push(new Watcher(
            ‘input‘,
            node,
            _this,
            attrVal,
            ‘value‘
          ))

          return function() {
            _this.$key = attrVal
            _this.$data[attrVal] =  nodes[key].value;
          }
        })(i));
      } 

      if (node.hasAttribute(‘v-bind‘)) {
        var attrVal = node.getAttribute(‘v-bind‘);
        _this._binding[attrVal]._directives.push(new Watcher(
          ‘text‘,
          node,
          _this,
          attrVal,
          ‘innerHTML‘
        ))
      }
    }
  }
  
   function Watcher(name, el, vm, exp, attr) {
    this.name = name;         //指令名称,例如文本节点,该值设为"text"
    this.el = el;             //指令对应的DOM元素
    this.vm = vm;             //指令所属myVue实例
    this.exp = exp;           //指令对应的值,本例如"number"
    this.attr = attr;         //绑定的属性值,本例为"innerHTML"

    this.update();
  }
  
  // 更新数据
  Watcher.prototype.update = function () {
    this.el[this.attr] = this.vm.$data[this.exp];
  }
  
  
  // 测试
  Vue.prototype._test = function($data) {
     var a = $data.number;
     $data.number = 32;
  }
  
  window.onload = function () {
    var app = new Vue({
      el: ‘#app‘,
      data: {
         number: 12,
         age: 444
      },
      methods: {}
    })
  }

</script>
</html>
技术图片

以上是关于10《Vue 入门教程》Vue 双向绑定指令的主要内容,如果未能解决你的问题,请参考以下文章

(Vue -05) v-model指令 + 绑定事件 + 深度响应式

vue数据双向绑定原理-解析器Complie

如何在 Vue.js 2 的自定义指令中进行双向绑定?

Vue.js教程--况颜

“别具一格”的vue双向数据绑定原理

vue双向绑定数据改为静态数据