vue双向绑定的简单实现（原创）
简单模拟一下vue的双向绑定实现，代码比较粗糙，菜鸟一枚，欢迎各位大佬斧正
1、实验环境：
利用a、b两个input，a代表页面中的数据，b代表data中的数据
2、原理：
利用Object.defineProperty()方法实现数据的更新；使用oninput（IE下的）和onporpertychange（非IE下的）方法对input框中值的改变进行监听
3、代码
注：以下原生js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
a: <input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)">
</br>
b: <input type="text" id="b" oninput="bb(event)" onporpertychange="bb(event)">
</body>
</html>
<script>
var a = document.getElementById('a')
var b = document.getElementById('b')
var data = {}
Object.defineProperty(data, "cell", {
set: function(newValue) {
if (newValue) {
a.value = newValue
b.value = newValue
}
}
})
</script>
<script>
var ie = !!window.ActiveXObject;
console.log('111')
if("onporpertychange" in a){
document.getElementById("a").attachEvent("onporpertychange",function(e){
console.log("input");
})
document.getElementById("b").attachEvent("onporpertychange",function(e){
console.log("input");
})
} else {
document.getElementById("a").addEventListener("oninput",function(e){
console.log("input");
})
document.getElementById("b").addEventListener("oninput",function(e){
console.log("input");
})
}
function aa(e){
data.cell = a.value
}
function bb(e){
data.cell = b.value
}
</script>
vue双向绑定的简单实现（原创）的更多相关文章
- vue实现双向绑定的简单原理: defineProperty
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理
废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
- Vue双向绑定的实现原理系列（一）：Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher
监听器Observer和订阅者Watcher 实现简单版Vue的过程,主要实现{{}}.v-model和事件指令的功能 主要分为三个部分 github源码 1.数据监听器Observer,能够对数据对 ...
随机推荐
- 64位ubuntu16.04系统安装tensorflow_cpu
ubuntu16.04安装tensorflow_cpu 一.安装anaconda: ①.下载anaconda包:Anaconda3-5.2.0-Linux-x86_64.sh 这是python3.6. ...
- Qt实现 动态化遍历二叉树（前中后层次遍历）
binarytree.h 头文件 #ifndef LINKEDBINARYTREE_H #define LINKEDBINARYTREE_H #include<c++/algorithm> ...
- SqlSugar ORM 的学习
http://www.codeisbug.com/Doc/8/1163 https://www.cnblogs.com/sunkaixuan/p/6082664.html
- day11.1函数进阶 列表集合 字典中的函数变量，函数作为形参
函数进阶 1.函数作为变量 a=123 name="gao" nums=[1,2,3] data=nums#指向同一个内存地址 #查看内存地址篇章 def func(): prin ...
- Alisha’s Party （HDU5437）优先队列+模拟
Alisha 举办聚会,会在一定朋友到达时打开门,并允许相应数量的朋友进入,带的礼物价值大的先进,最后一个人到达之后放外面的所有人进来.用优先队列模拟即可.需要定义朋友结构体,存储每个人的到达顺序以及 ...
- 作业一 ：关于C语言
C语言是计算机专业的基础课,同时也是计算机专业的第一个入门语言,学好C语言母庸质疑.就目前来看,在C语言中已经学习的内容有:基本运算符及表达式.输入输出函数.选择 结构程序设计.循环结构程序设计.数组 ...
- 项目工程中的WebRoot与WebContent有什么区别？
[1] 在MyEclipse中创建web项目后,web程序的根目录文件夹是WebRoot,而创建dynam web project时候,web程序的根 目录文件夹是WebContent,他们之间没有本 ...
- 整合spring+springmvc+mybatis
开发环境: jdk 1.8 eclipse 4.7.0 (Oxygen) tomcat 8.5.29 mysql 5.7 开发前准备: spring 框架的jar包,在这里使用的是spring-5.0 ...
- 2019嘉韦思杯线上初赛writeup
1 土肥原贤二 看到页面怀疑是sql注入,写了个4'进去就发生报错.could not to the database You have an error in your SQL syntax; ch ...
- robotframework之去除空格、去掉前面的0、增加空格换行符的方法，两个字符之间的拼接
1.去除空格 A)若需要去除两个拼接字符之间的空格,可以使用robotframework中的关键词Catenate,需要注意的是SEPARATOR=一定需要大写 B)若在一个字符串中存在空格,且需要去 ...