手写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 = ; 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双向绑定数据的更多相关文章
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- vue 双向绑定 数据修改但页面没刷新
在数据改动的代码后加 this.$forceUpdate(); 若是在某个特定方法中 则将this改为方法中设定的名称
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- vue 结合localStorage 来双向绑定数据
结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理
废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...
- 剖析手写Vue，你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
随机推荐
- POJ2104 K-th Number（整体二分）
嘟嘟嘟 整体二分是一个好东西. 理解起来还行. 首先,需要牢记的是,我们二分的是答案,也就是在值域上二分,同时把操作分到左右区间中(所以操作不是均分的). 然后我就懒得讲了-- 李煜东的<算法竞 ...
- 密码破解技术——P201421410029
学 号 201421410029 中国人民公安大学 Chinese people’ public security university 网络对抗技术 实验报告 实验三 密码破解技术 ...
- 使用Android绘图技术绘制一个椭圆形，然后通过触摸事件让该椭圆形跟着手指移动
引言:在图形绘制中,控制一个图形(圆形,椭圆形,矩形,三角形)移动时,其实计算的都是该图形的中心点移动.在绘制过程中,首先计算出中心点,然后根据中心点的位置计算重图形的上下左右位置.我们假设图形左边为 ...
- Android使用正则表达式验证手机号
国内手机号代码段分配如下: 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.152.155.156. ...
- Android 网络请求超时处理方案
以用户登录为例介绍用户访问网络时的请求超时处理的两种方法: 1)使用android提供的工具类AsyncTask类,此类提供了一个AsyncTask.execute().get(timeout, un ...
- lwip Packet buffers (PBUF) API 操作 集合
struct pbuf * pbuf_alloc (pbuf_layer layer, u16_t length, pbuf_type type) struct pbuf * pbuf_all ...
- USB主机控制器ECHI
USB主机控制器ECHI 2017年10月24日 15:44:11 阅读数:239 1. 主机控制器(Host Controller) • UHCI: Universal Host Controlle ...
- OutputFormat输出过程的学习
花了大约1周的时间,最终把MapReduce的5大阶段的源代码学习结束掉了.收获不少.就算本人对Hadoop学习的一个里程碑式的纪念吧.今天花了一点点的时间,把MapReduce的最后一个阶段.输出O ...
- vi 替换
在vi编辑器中,能够利用 :s命令能够实现字符串的替换.详细的使用方法例如以下: 1.:s/str1/str2/ 用字符串 str2 替换行中首次出现的字符串str1: 2.:s/str1/str2/ ...
- 20155323刘威良《网络对抗》Exp4 恶意代码分析
20155323刘威良<网络对抗>Exp4 恶意代码分析 实践目标 1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件: ...