<!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. AtCoder Grand Contest #026 B - rng_10s

    Time Limit: 2 sec / Memory Limit: 1024 MB Score : 600600 points Problem Statement Ringo Mart, a conv ...

  2. poj1637 Sightseeing tour[最大流+欧拉回路]

    混合图的欧拉回路定向问题. 顺便瞎说几句,有向图定欧拉回路的充要条件是每个点入度等于出度,并且图联通.无向图的话只要联通无奇点即可. 欧拉路径的确定应该是无向图联通且奇点数0个或2个,有向图忘了,好像 ...

  3. 《c# 实现p2p文件分享与传输系统》 二、 设计

    c#实现P2P文件分享与传输系统 二.设计 在上一篇文章中,介绍了P2P网络的常用模型,并确定了EasyP2P系统的框架,本文将就此设计完成它的主要结构和运作流程. 1. 首先是Tracker Ser ...

  4. Redis多个数据库

    注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...

  5. spring-data-cassanra的简单使用

    之前写了JAVA操作cassandra驱动包,现在来看看spring-data对cassandra的支持.这里是spring-data-cassandra的官方文档:http://docs.sprin ...

  6. win7 64位搭建Mantis 缺陷管理系统（2）

    建立Bug数据库 1. 右键Windows托盘的图标,选择“Local Web”,(或者在IE地址中输入“http://127.0.0.1/”)可看到如下页面: 2. 点击选择“mantis”,进入页 ...

  7. 【242】◀▶IEW-Unit07

    Unit 7 Education: Schools I.句子基本结构在写作中的运用 主谓宾 主系表 主谓 主谓宾宾 主谓宾补 1.主语: 1)位于句首 2)名词 例句:应该建立相关法律 Laws an ...

  8. 爬虫之BeautifulSoup， CSS

    1. Beautiful Soup的简介 2. Beautiful Soup 安装 可以利用 pip 或者 easy_install 来安装,以下两种方法均可 easy_install beautif ...

  9. soap入门篇

    摘自:http://blog.csdn.net/erica_1230/article/details/54982081 SOAP的全称是Simple Object Access Protocol,即简 ...

  10. Manacher's Algorithm 马拉车算法（最长回文串）

    这个马拉车算法Manacher‘s Algorithm是用来查找一个字符串的最长回文子串的线性方法,由一个叫Manacher的人在1975年发明的,这个方法的最大贡献是在于将时间复杂度提升到了线性,这 ...