<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>双向绑定简单实现</title>

</head>

<body>

  <div id="app">

    <input type="text" v-model="text">

    {{ text }}

  </div>

  <script>

    function observe (obj, vm) {

      Object.keys(obj).forEach(function (key) {

        defineReactive(vm, key, obj[key]);

      });

    }

    function defineReactive (obj, key, val) {

      var dep = new Dep();

      Object.defineProperty(obj, key, {

        get: function () {

          // 添加订阅者watcher到主题对象Dep

          if (Dep.target) dep.addSub(Dep.target);

          return val

        },

        set: function (newVal) {

          if (newVal === val) return

          val = newVal;

          // 作为发布者发出通知

          dep.notify();

        }

      });

    }

    function nodeToFragment (node, vm) {

      var flag = document.createDocumentFragment();

      var child;

      while (child = node.firstChild) {

        compile(child, vm);

        flag.appendChild(child); // 将子节点劫持到文档片段中

      }

      return flag;

    }

    function compile (node, vm) {

      var reg = /\{\{(.*)\}\}/;

      // 节点类型为元素

      if (node.nodeType === 1) {

        var attr = node.attributes;

        // 解析属性

        for (var i = 0; i < attr.length; i++) {

          if (attr[i].nodeName == 'v-model') {

            var name = attr[i].nodeValue; // 获取v-model绑定的属性名

            node.addEventListener('input', function (e) {

              // 给相应的data属性赋值，进而触发该属性的set方法

              vm[name] = e.target.value;

            });

            node.value = vm[name]; // 将data的值赋给该node

            node.removeAttribute('v-model');

          }

        };

        new Watcher(vm, node, name, 'input');

      }

      // 节点类型为text

      if (node.nodeType === 3) {

        if (reg.test(node.nodeValue)) {

          var name = RegExp.$1; // 获取匹配到的字符串

          name = name.trim();

          new Watcher(vm, node, name, 'text');

        }

      }

    }

    function Watcher (vm, node, name, nodeType) {

      Dep.target = this;

      this.name = name;

      this.node = node;

      this.vm = vm;

      this.nodeType = nodeType;

      this.update();

      Dep.target = null;

    }

    Watcher.prototype = {

      update: function () {

        this.get();

        if (this.nodeType == 'text') {

          this.node.nodeValue = this.value;

        }

        if (this.nodeType == 'input') {

          this.node.value = this.value;

        }

      },

      // 获取data中的属性值

      get: function () {

        this.value = this.vm[this.name]; // 触发相应属性的get

      }

    }

    function Dep () {

      this.subs = []

    }

    Dep.prototype = {

      addSub: function(sub) {

        this.subs.push(sub);

      },

      notify: function() {

        this.subs.forEach(function(sub) {

          sub.update();

        });

      }

    };

    function Vue (options) {

      this.data = options.data;

      var data = this.data;

      observe(data, this);

      var id = options.el;

      var dom = nodeToFragment(document.getElementById(id), this);

      // 编译完成后，将dom返回到app中

      document.getElementById(id).appendChild(dom);

    }

    var vm = new Vue({

      el: 'app',

      data: {

        text: 'hello world'

      }

    });

  </script>

</body>

</html>

转载自：http://www.cnblogs.com/kidney/p/6052935.html  代码 解释 这里

Vue双向绑定简单实现的更多相关文章

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

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

  2. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  3. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  4. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  5. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  6. Vue双向绑定的实现原理系列（一）：Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

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

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

  8. Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher

    监听器Observer和订阅者Watcher 实现简单版Vue的过程,主要实现{{}}.v-model和事件指令的功能 主要分为三个部分 github源码 1.数据监听器Observer,能够对数据对 ...

  9. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

随机推荐

  1. 1076 Forwards on Weibo (30)（30 分）

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  2. kettle每天自动发送邮件总结_20161128

    kettle作为java开发的工具,很多功能在目前工作中还用不到,原来它也是支持java代码的,现在用到的也就是它从服务器导数到数据库,然后再进行数据处理的功能. 如何快速学会使用kettle发送邮件 ...

  3. bzoj 1954 & poj 3764 The xor-longest Path dfs+Trie

    题目大意 给定一棵n个点的带权树,求树上最长的异或和路径 题解 因为\(xor\)操作满足可结合性,所以有 \(a\text{ }xor\text{ }b\text{ }xor\text{ }b = ...

  4. Vmware ESXi 6.5 安装手册

    1          安装前准备 1.1          硬件环境准备 无 备注: 本指导书以虚拟光驱.虚拟软驱为例,如使用物理光驱.物理软驱安装系统操作则以实际系统光盘.软盘代替. 1.2     ...

  5. 如何使用代码美化器Uncrustify (How to use code beautifier Uncrustify)

    1.下载NodePad++, 2.选择菜单Plugins/Plugin Manager/Show Plugin Manager 3.勾选UniversalIndentGUI,点击Install 4.下 ...

  6. 将eclipse java程序打包成jar的总结（包括工程中没有引用外部jar包和有引用外部jar包两种情况）

    一.当eclispe java工程中没有引用外部jar包时: 选中工程---->右键,Export...--->Java--->JAR file--->next-->填写 ...

  7. string行读入&&文件输入

    普通读入的时候会以空格作为分隔符 直接用cin>>s读入,此时可以直接处理文件尾的情况 text代码: #include <iostream>#include <cstd ...

  8. 【原】spring+springmvc+mybatis整合

    整合框架的代码结构: 最全约束: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&q ...

  9. apply的使用技巧

    1.什么是apply?他和call有什么区别? apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象 ...

  10. <!--[if !IE]> 的用法

    除IE外都可识别