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,能够对数据对 ...
随机推荐
- 二、Windows 下 ShellCode 编写初步
第二章.Windows 下 ShellCode 编写初步 (一)shellcode 定义:最先的 Shell 指的是人机交互界面,ShellCode 是一组能完成我们想要的功能的机器代码,通常以十六进 ...
- Golang基本语法
(1) 全局变量与局部变量 首先,得了解go代码块,也就是"{}",代码块外面访问不到代码块里面的变量. 在go语言里,变量民首写字母为大写则是全局变量,首写字母小写则是局部变量. ...
- 构建之法 chapter 8 需求分析 ——读书心得
需求分析,是软件工程开发的第一步,准确全面地找到用户的需求,尽可能满足用户的要求,是软件惺惺发展的基础.所以需求分析很重要.具体来说有以下几个步骤: 1.获取和引导需求:软件团队需要找到软件的利益相关 ...
- 自建yum仓库，分别为网络源和本地源
配置本地源 建立本地源目录 [root@qingcheng-db lgp]#mkdir /mnt/cdrom [root@qingcheng-db lgp]#mkdir /yum 挂载Centos光盘 ...
- 寒假作业 pta编程总结3
实验代码: 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕 ...
- bat 传递参数
调用bat时,传递参数有个小问题,记录一下. 1.问题描述: 传递参数时,接收的值不对.传递了“1,2,3”,接收时,只剩下1.后面的没有了. 解决: 原因是bat取参时,语法弄错了. Syntax ...
- H5 实现图片上传预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- <%@taglib prefix="c" uri="http://java.sun.com/jsp/jst1/core"%>报错
查了一晚上 刚开始觉得最靠谱的还是这个说法: 1.下载jakarta-taglibs-standard-1.1.2.zip(在Weblogic中必须下载1.0版 http://jakarta.apa ...
- Java中的锁分类与使用
1. Java锁的种类 在笔者面试过程时,经常会被问到各种各样的锁,如乐观锁.读写锁等等,非常繁多,在此做一个总结.介绍的内容如下: 乐观锁/悲观锁 独享锁/共享锁 互斥锁/读写锁 可重入锁 公平锁/ ...
- STM32 USB-三个HID-interface 复合（组合）设备的代码实现-基于固件库（原创）
一.概论: 在STM32_USB-FS-Device_Lib_V4.1.0的Custom_HID工程基础上进行修改: 开发一款设备,有三个HID接口,mouse+pen+自定义HID 其中:0_HID ...