来一张原理图：

实现思路：

　　（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 = ; 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 = ;

  }

  window.onload = function () {

    var app = new Vue({

      el: '#app',

      data: {

         number: ,

         age:

      },

      methods: {}

    })

  }

</script>

</html>

手写vue双向绑定数据的更多相关文章

  1. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  2. vue 双向绑定 数据修改但页面没刷新

    在数据改动的代码后加 this.$forceUpdate(); 若是在某个特定方法中 则将this改为方法中设定的名称

  3. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  4. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  5. 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  6. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  7. 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  8. 剖析手写Vue，你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  9. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

随机推荐

  1. BZOJ4236:JOIOJI(乱搞)

    Description JOIOJI桑是JOI君的叔叔.“JOIOJI”这个名字是由“J.O.I”三个字母各两个构成的. 最近,JOIOJI桑有了一个孩子.JOIOJI桑想让自己孩子的名字和自己一样由 ...

  2. Python中让MySQL查询结果返回字典类型的方法

    import pymysql host='localhost' user='root' passwd='root' port=3306 db='test' db=pymysql.connect( ho ...

  3. git回答整理

    1.git常用命令 首先明确:git有工作区.暂存区.版本库,工作区是电脑里能看到的目录 创建仓库: git init newrepo,使用我们指定目录作为Git仓库(初始化后,会在newrepo目录 ...

  4. VMware虚拟机下Linux系统的全屏显示

    在VMware虚拟机下的Linux无法全屏的问题的解决方案如下: 1.   启动虚拟机,并启动Redhat6.4. 2.   点击“view”——然后将Autofit window这个选项勾选.(一般 ...

  5. JAVA框架 Mybaits 动态代理

    一.动态代理: mybaits给咱们提供一套动态代理,我们只需要按他的要求写接口即可,mybatis帮做动态代理,相当于咱们写的接口的实现类.底层通过反射实例化代理对象,通过代理对象调用相应的方法, ...

  6. JAVA框架：hibernate

    一:介绍 hibernate是java中的dao层,即和持久层打交道.底层也是数据库驱动.连接等.他也有orm,类和数据库的映射. 二.部署 下载地址:https://sourceforge.net/ ...

  7. zabbix部署（1）(lnmp转)

    1.lnmp 首先 确保CentOS7上网络配置正确,可以正常访问互联网. 确保已经关闭了iptables. CentOS7上是firewall,关闭命令: 1 2 # systemctl stop  ...

  8. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. AbelSu区块链应用场景收集

    1.基于智能合约的众筹 众筹项目的资金通常由一个中心化不可变更且开放的数据库来控制,这个数据库可以追踪所有出资人. 虽然如此,我们可以用一种去中心化的方式来实现,而且只要创建一个代币就可以追踪资金.一 ...

  10. STS-使用前准备

    sts 的基础框架拿的eclipse的,你可以理解为eclipse + spring插件的高级升华版.在使用上可以很大限度的参考eclipse的操作. 首先,调整字体. 中文很麻烦的,因为编码问题.习 ...