1. // html
  2.  
  3. <body>
  4.   <div id="app">
　　　　<input type="text" v-model="number">
　　　　<input type="text" v-model="num">
　　　　<input type="button" v-click="increment" value="加1">
　　　　<input type="button" v-click="increment" value="加2">
　　　　<h3 v-bind="number"></h3>
　　　　<h3 v-bind="num"></h3>
  1.   </div>
  2. </body>
  1. // js vue的实例
  2.  
  3.   window.onload = function () {
  4.     var app = new Vue({
  5.       el: '#app',
  6.       data: {
  7.         number: ,
  8.         num: ,
  9.       },
  10.       methods: {
  11.         increment: function () {
  12.           this.number++;
  13.           this.num++;
  14.         },
  15.       }
  16.     })
  17.   }
  1. // vue的构造函数
  2.  
  3.   function Vue(options) {
  4.     this._init(options);
  5.   }
  6.   Vue.prototype._init = function (options) {
  7.     this.$options = options;
  8.     this.$el = document.querySelector(options.el);
  9.     this.$data = options.data;
  10.     this.$methods = options.methods;
  11.  
  12.     this._binding = {};
  13.     this._obverse(this.$data);
  14.     this._complie(this.$el);
  15.   }
  16.   Vue.prototype._obverse = function (obj) {
  17.     var _this = this
  18.     for (let key in obj) {
  19.       if (obj.hasOwnProperty(key)) {
  20.         this._binding[key] = {
  21.           _directives: []
  22.         };
  23.         let value = obj[key];
  24.         if (typeof value === 'object') {
  25.           this._obverse(value);
  26.         }
  27.         let binding = this._binding[key];
  28.         Object.defineProperty(this.$data, key, {
  29.           enumerable: true,//目标属性是否可以被枚举。true | false
  30.           configurable: true, //目标属性是否可以被删除或是否可以再次修改特性 true | false
  31.           get: function () {
  32.             return value;
  33.           },
  34.           set: function (newVal) {
  35.             if (value !== newVal) {
  36.               value = newVal;
  37.               binding._directives.forEach(function (item) {
  38.                 item.update();
  39.               })
  40.             }
  41.           }
  42.         })
  43.       }
  44.     }
  45.   }
  46.  
  47.   Vue.prototype._complie = function (root) {
  48.     var _this = this;
  49.     var nodes = root.children;
  50.     for (let i = ; i < nodes.length; i++) {
  51.           let node = nodes[i];
  52.       if (node.children.length) {
  53.         _this._complie(node);
  54.       }
  55.  
  56.       if (node.hasAttribute('v-click')) {
  57.         node.onclick = (function () {
  58.           var attrVal = nodes[i].getAttribute('v-click');
  59.           return _this.$methods[attrVal].bind(_this.$data);
  60.         })(i);
  61.       }
  62.  
  63.       if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {
  64.         node.addEventListener('input', (function() {
  65.           var attrVal = node.getAttribute('v-model');
  66.           _this._binding[attrVal]._directives.push(new Watcher(
  67.             'input',
  68.             node,
  69.             _this,
  70.             attrVal,
  71.             'value'
  72.           ))
  73.           return function () {
  74.             _this.$data[attrVal] = nodes[key].value;
  75.           }
  76.         })());
  77.       }
  78.       if(node.hasAttribute("v-bind")){
  79.         var attrVal = node.getAttribute('v-bind');
  80.         _this._binding[attrVal]._directives.push(new Watcher(
  81.             'text',
  82.             node,
  83.             _this,
  84.             attrVal,
  85.             'innerHTML'
  86.           ))
  87.       }
  88.     }
  89.   }
  90.   function Watcher(name, el, vm, exp, attr) {
  91.     this.name = name;         //指令名称，例如文本节点，该值设为"text"
  92.     this.el = el;             //指令对应的DOM元素
  93.     this.vm = vm;             //指令所属myVue实例
  94.     this.exp = exp;           //指令对应的值，本例如"number"
  95.     this.attr = attr;         //绑定的属性值，本例为"innerHTML"
  96.  
  97.     this.update();
  98.   }
  99.   Watcher.prototype.update = function () {
  100.     this.el[this.attr] = this.vm.$data[this.exp];
  101.   }

vue之双绑实现的更多相关文章

  1. 前端MVVM模式及其在Vue和React中的体现

    MVVM相关概念 Mvvm 前端数据流框架精讲 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器: ...

  2. Vue.js 是如何实现 MVVM 的？

    目录 框架到底为我们做了什么? 如何理解 MVVM ? 如何实现 MVVM - 以 Vue.js 为例 Vue 如何实现响应式 Vue 如何解析模板 Vue.js 运行机制 手写一个 Vue.js 框 ...

  3. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  4. [转] Vue原理解析——自己写个Vue

    一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...

  5. Vue原理解析——自己写个Vue

    Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...

  6. vue踩坑

    1. 双向绑定的对象 改变或新增其属性 DOM不刷新问题 var obj = { "attr1": "1", "attr2": [2] }; ...

  7. Vue（1）

    一:概述 Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关心视图层,不仅易于上手,还便于与第三方库或既有项目 ...

  8. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. INSERT高级应用

    INSERT INTO departments VALUES (departments_seq.nextval, 'Entertainment', 162, 1400); INSERT INTO em ...

  2. ROM和RAM的故事

    在公众号里看到一篇很好的文章讲解rom和ram,之前也是一直不能理解两者的区别,今天就转载记下来吧.也方便大家学习. 因为我刚开始学习的时候总喜欢刨根问底,一个问题要是不搞清楚,后面学习都会很吃力的. ...

  3. postgresql----时间类型

    postgresql支持的时间类型如下图所示: 日期 date: 建议日期的输入格式为1997-01-01,虽然也支持19970101,1/1/1997,Jan-1-1997等多种格式. 时间戳 ti ...

  4. 清空messages方法

    1.du -sh /var/log/messages 2.losf /var/log/messages 3.cat /dev/null > /var/log/messages 4.du -sh ...

  5. SpringCloud 进阶之分布式配置中心(SpringCloud Config)

    1. SpringCloud Config SpringCLoud Config 为微服务架构中的微服务提供集中化的外部配置支持,配置服务器为各个不同微服务应用 的所有环境提供了一个中心化的外部配置; ...

  6. MySQL 通用查询日志和慢查询日志分析

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句.2)慢查询 ...

  7. python 类高级语法 静态方法

    通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类变量,但静态方 ...

  8. 使用scikit-learn 估计器分类

    本章的几个概念: 估计器(estimator) 用于分类.聚类和回归分析          转换器(transformer):用于数据预处理回来数据转换          流水线(pipeline): ...

  9. python 面向对象编程学习总结

    面向对象是个抽象的东西,概念比较多,下面会一一介绍. 一.类和实例 类(Class)和实例(Instance)是面向对象最重要的概念. 类是指抽象出的模板.实例则是根据类创建出来的具体的“对象”,每个 ...

  10. [ABP项目实战]-后台管理系统-目录

    学习ABP也有一段时间了,但是总是学习了后面的忘记了前面的,为了巩固所学到的知识以及记录所学到的东西,因此有了本系列的诞生. ABP ASP.NET Boilerplate Project(ABP.N ...