简单模拟一下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双向绑定的简单实现(原创)的更多相关文章

  1. vue实现双向绑定的简单原理: defineProperty

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 最近老是有兄弟问我,Vue双向绑定的原理,以及简单的原生js写出来实现,我就来一个最简单的双向绑定,原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  3. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  4. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  7. Vue双向绑定的实现原理系列(一):Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  8. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  9. Vue双向绑定的实现原理系列(三):监听器Observer和订阅者Watcher

    监听器Observer和订阅者Watcher 实现简单版Vue的过程,主要实现{{}}.v-model和事件指令的功能 主要分为三个部分 github源码 1.数据监听器Observer,能够对数据对 ...

随机推荐

  1. Python学习之路基础篇--10Python基础,函数进阶

    1 命名空间 对于Python 来说命名空间一共有三种 1 内置命名空间 —— Python 解释器 就是Python 解释器一启动就可以使用的名字,储存在内置命名空间中.内置的名字在启动解释器的时候 ...

  2. vue+axios跨域解决方法

    通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...

  3. yaf twig配置

    1.安装 TWIG composer require twig/twig2.COMPOSER自动加载的引用修改 BOOTSTRAP.PHP 增加 public function _initAutolo ...

  4. asp.net 按钮执行前后台方法——前台弹出提示信息,确认后继续执行后台方法,取消则不执行后台方法

    我们做一个测试的web页面,只需要一个button+一个label就ok啦,通过button按钮的后台事件修改label的text属性值来测试是否执行了后台事件里的代码 前台 写一个js方法: < ...

  5. Redis管道功能

    Redis管道,Redis存储用户浏览数据 当频繁的存储获取Redis数据库中的数据时,可以使用Redis的pipeline(管道)功能,将多个相互没有依赖关系的读写操作,如:下一步执行的Redis操 ...

  6. LeetCode - Implement Magic Dictionary

    Implement a magic directory with buildDict, and search methods. For the method buildDict, you'll be ...

  7. C#利用首尾時間計算中間時間差

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. linux后台执行命令:&与nohup的用法

    & 这种方法很简单,就是在命令之后加个“&”符号就可以了,如下: ./test & 这样一来,test程序就在后台运行了.但是,这样处理还不够,因为这样做虽然程序是在后台运行了 ...

  9. js中this最简单清晰的解释

    引自  https://www.cnblogs.com/huangwentian/p/6854472.html#commentform ① this指向的,永远只可能是对象!       ② this ...

  10. cut字符串截取

    cut字符串截取 -d 按字节截取 [root@slave elk]# ll total 0 drwxr-xr-x. 6 root root 194 Jan 24 16:15 bigdesk 截取前2 ...