真正的原生JS数据双向绑定(实时同步)

接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章

js实现数据双向绑定

然后写出了我自己的代码

window.onload = function () {
var obj_1 = document.getElementById('input_1');
var obj_2 = document.getElementById('input_2');
obj_1.addEventListener('keyup', modelToView);//主要就是这个监听事件
var model = new Object(null);
Object.defineProperty(model, 'user', {
set: function (value) {
user = value;
obj_2.value = value;
},
get: function () {
return user;
}
})
function modelToView() {
model['user'] = obj_1.value;
}
}

大家注意到第三行addEventListener("keyup","modelToView")这里,原博主写的事件是'blur',即失去焦点事件,我打出来之后发现不能实现实时同步,因为需要将焦点取消掉。

于是就上网搜了一些事件,发现了keyup这个事件,虽然不明白和press&down有什么区别,但是这个事件却可以完美的实现像vue一样的数据双向绑定功能

真正的原生JS数据双向绑定(实时同步)的更多相关文章

  1. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  2. [JS] 数据双向绑定原理

    通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...

  3. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  4. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  5. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  6. JS实现数据双向绑定

    本文参考https://www.cnblogs.com/tianhaining/p/8425345.html 首先先说个面试题哈,就是vue中的v-model是如何实现双向数据绑定的咳咳,下面开始背诵 ...

  7. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  8. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  9. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

随机推荐

  1. Hi3516如何连接Wifi(二)

    目录: 一.总体思路 二.启动Daemon 三.作者文章合集 书承上回(Hi3516如何连接Wifi(一)),上一篇聊了一下怎样在Hi3516中用wpa_supplicant连接到Wifi热点,本文讲 ...

  2. Golang+Protobuf+PixieJS 开发 Web 多人在线射击游戏(原创翻译)

    简介 Superstellar 是一款开源的多人 Web 太空游戏,非常适合入门 Golang 游戏服务器开发. 规则很简单:摧毁移动的物体,不要被其他玩家和小行星杀死.你拥有两种资源 - 生命值(h ...

  3. java面试-对象的创建、内存布局、访问定位

    一.对象的创建 1.虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,那必须先执行相应的 ...

  4. Ubuntu安装docker/docker-compose(在全新系统状态下的安装)

    设置仓库 更新 apt 包索引. $ sudo apt-get update 安装 apt 依赖包,用于通过HTTPS来获取仓库: $ sudo apt-get install \ apt-trans ...

  5. Java8中的Stream流式操作 - 入门篇

    作者:汤圆 个人博客:javalover.cc 前言 之前总是朋友朋友的叫,感觉有套近乎的嫌疑,所以后面还是给大家改个称呼吧 因为大家是来看东西的,所以暂且叫做官人吧(灵感来自于民间流传的四大名著之一 ...

  6. Java(171-194)【接口、多态】

    1.接口概述与生活举例 接口就是一种公共的规范标准 只要符合规范标准,就可以大家通用 2.接口的定义基本格式  public interface 接口名称 {       // 抽象方法      / ...

  7. 吉特日化MES&WMS系统--三色灯控制协议转http

    关于硬件控制大部分都是使用CS客户端程序,一般连接口都是用网口,串口,USB口等,应用通讯是不支持HTTp协议操作的,而目前一般做技术的人员都在于BS开发,使用HTTP 协议,所以在硬件交互上可能觉得 ...

  8. Day05_24_继承

    继承 什么是继承? 继承本质上是对某一批类的抽象,从而实现对现实世界更好的建模.继承是类和类之间的一种关系,除此之外类和类之间的关系还有依赖.组合.聚合等. 继承就是子类(派生类)继承父类(基类)的特 ...

  9. 代码安全丨第六期:XPath注入漏洞样例

    1.什么是XPath注入漏洞? XPath是一种用来在内存中导航整个XML树的语言,它使用路径表达式来选取XML文档中的节点或者节点集. XPath注入是指程序使用外部输入动态构造用于从XML数据库检 ...

  10. spring boot 通过feign调用api接口

    目的:远程调用服务器api,直接上步骤: 1,添加maven依赖,这是必须的: <dependency> <groupId>org.springframework.cloud& ...