原生js 实现双向数据绑定

使用Object.defineProperty双向绑定示例
最新推荐文章于 2023-02-17 20:19:06 发布
转载 最新推荐文章于 2023-02-17 20:19:06 发布 · 1.1k 阅读 · 0


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb">{{hello}}</span>
<script>
    var obj = {};
    Object.defineProperty(obj,'hello',{
        set:function(val){
            document.getElementById('bb').innerHTML = val;
            document.getElementById('aa').value = val;
        }
    });
    document.getElementById('aa').onkeyup = function(e){
        obj.hello = e.target.value;
    };
    obj.hello = "";


</script>
</body>

</html>

出处：https://www.cnblogs.com/yuqing-o605/p/6790709.html?utm_source=itdadao&utm_medium=referral

精选资源
原生js实现vue数据双向绑定.zip
03-08
这个"原生js实现vue数据双向绑定.zip"文件很显然是为了帮助我们理解Vue.js中数据双向绑定背后的原理，并尝试用纯JavaScript来模拟实现这一功能。下面我们将深入探讨Vue的数据绑定机制以及如何用原生JS进行模拟。 ...
实现非常简单的js双向数据绑定
10-23
通过上述方法，我们可以利用现有的JavaScript库，如jQuery，来模拟框架中的双向绑定功能，从而实现界面与数据之间的动态同步。这些基础知识不仅帮助我们更好地理解框架，也为我们在框架之外解决问题提供了更多的可能...
原生JS双向数据绑定实现
07-31
/** *原生JS双向数据绑定实现 *@author wall *@date 2018-06-20 *@desc 实现可配置属性的双向数据绑定 *使用说明: *1.声明全局对象:如 * var test = { * topInfo: { * name:"张三", * age:18, * width:400 * } * }; *2.设置HTML数据绑定标签属性如 * <input data-bind="test.topInfo.name" style-width="test.topInfo.width"/> * * * * *3.在文档加载完成后执行:DataBind.initBind();会将本文档内的所有符合设置的节点进行数据绑定 *4.目前支持的标签:data-show input img div span textarea,后续可配置拓展 * */
原生js实现数据双向绑定
big_beer的博客
12-31 2664
双向绑定 使用原生js实现数据的双向绑定。 关于vue的双向数据绑定，其核心是 Object.defineProperty()方法 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc) obj：需要定义属性的当前对象。 prop：当前需要定义的属性名。 desc：具体的改变方法。 <!DOCTYPE html> <html> <head&
原生js实现双向数据绑定
weixin_47710463的博客
03-05 700
双向数据绑定原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向数据绑定</title> </head> <body> <input id="inp" value=""> <p id="text"></p> </body> <scr
用原生js实现数据双向绑定
huang100qi的专栏
12-24 5802
html> html lang="en"> head> meta charset="UTF-8"> title>Demotitle> script> function DataBinder( object_id ) { // Create a simple PubSub object var pubSub =
使用原生js实现数据的双向绑定
m0_60676278的博客
02-17 409
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。关于vue的双向数据绑定，其核心是 Object.defineProperty()方法。使用原生js实现数据的双向绑定。obj：需要定义属性的当前对象。prop：当前需要定义的属性名。desc：具体的改变方法。
实现原生JS的双向数据绑定功能
【原生JS双向数据绑定实现】知识点概述： 1. 数据绑定概念：数据绑定是前端开发中常见的需求之一，它能够确保模型数据和视图界面之间的同步更新。在传统的Web应用中，开发者需要手动更新界面元素的显示内容以响应...
JS原生数据双向绑定实现代码
10-19
总结一下，这个JS原生数据双向绑定的实现原理如下： 1. 使用发布/订阅模式实现事件的分发。 2. 通过`data-*`属性将HTML元素与数据模型关联起来。 3. 监听`input`事件，当用户在输入框中做出改变时，更新模型。 4. ...
原生JS实现vue中双向数据绑定
qq_45802159的博客
03-15 295
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
js实现数据双向绑定
07-18
数据双向绑定源码
原生JS实现双向数据绑定
m0_46101895的博客
02-25 337
//html部分 <input type="text" id="foo"> <p id="test"></p> //js部分 <script> var user = { get inputValue() { return document.getElementById('foo').value }, set inputValue(value) { document.getElementById('foo').value = val
js系列（更新中） - 原生js实现数据双向绑定
m0_49135418的博客
03-30 399
主要思路是通过在数据对象上定义get和set方法(get，set，configurable，enumerable)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作； 以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。 <!DOCTYPE html> <html lang="en"> <h
原生实现双向数据绑定
qq_44704740的博客
12-27 316
数据劫持: 利用 Object.defineProperty 可以修饰对象的属性, 进行对象属性的 获取 和 设置的劫持 <input type="text"> <h4></h4> // 1. 视图改变，数据跟着改变 // 2. 数据改变，视图跟着改变 let h4 = document.querySelector('h4') let input = do...
基于原生JS和订阅发布者模式的数据双向绑定
weixin_41329634的博客
07-18 542
双向绑定相信大家都耳熟能详，即ViewModel中的data部分和View之间的双向关系，数据可以驱动视图，视图页面的改变也可以反向来更改数据。这篇文章先做一个利用原生JS与订阅发布者模式来实现的简单双向绑定.........
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值