ES6模拟双向绑定原理

最新推荐文章于 2024-07-23 19:57:32 发布
最新推荐文章于 2024-07-23 19:57:32 发布
阅读量88 收藏
点赞数 2
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C1rq99/article/details/117394324
版权

手写ES6模拟双向绑定，上代码

{
    // 获取dom节点

    const inputObj = document.getElementById("input");
    const txtObj = document.getElementById("txt");

    // 初始化代理对象

    const obj = {};

    // 代理选项

    const handler = {
        get: function (target, key) {
            return Reflect.get(target, key)
        },
        set: function (target, key, value) {
            if (key === "text") {
                inputObj.value = inputObj.value === value ? inputObj.value : value
                txtObj.innerHTML = value
            }
            return Reflect.set(target, key, value)
        }
    }
    let objProxy = new Proxy(obj, handler);
    //给输入框添加键盘输入事件
    inputObj.addEventListener("keyup", function (e) {
        objProxy.text = e.target.value;
        console.log(objProxy);
    })
    objProxy.text = "1234"

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>Say What：<span id="txt"></span></h1>
    <input type="text" id="input">
    <script src="./dist/v-bind.js"></script>
</body>

</html>
C1rq99
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MVVM:模拟Vue，MVVM的简易实现（ES6）
04-27
视图与模型之间的通信是通过双向数据绑定完成的，当模型数据变化时，视图会自动更新；反之，当用户操作视图时，模型也会相应更新。 3. **视图模型（ViewModel）**：视图模型是连接模型和视图的桥梁，它包含了对模型...
js代码-es6-proxy
07-15
- **数据绑定**：在MVVM框架中，如Vue.js，Proxy用于实现双向数据绑定。 - **动态数据验证**：在表单提交前，可以使用Proxy检查输入数据的合法性。 - **模拟私有属性**：虽然JavaScript本身不支持真正的私有属性，但...
ES6语法实现数据的双向绑定
做技术，坚持才是最重要的，一时的热情只是暂时的进步
10-13 432
废话不多说，直接上代码，代码有备注！！！ 方式一：利用 defineProperty 方法 <div><input type="text" placeholder="请输入数据" /></div> <!--渲染区域--> <div class="item-box"></div> <button>重置</button> <script> let btn = document.queryS
es6双向数据绑定
weixin_33979203的博客
03-01 517
代码如下 &lt;div id="test"&gt; &lt;input type="text" v-model="name"&gt; name:{{name}} age:{{age}} &lt;/div&gt; &lt;script&gt; let el = document.getElementById...
使用ES6实现MVVM的双向绑定
CSU_Zipple的博客
07-14 1128
实现Vue数据双向绑定的一些心得 创建项目 本文github地址：https://github.com/csuZipple/Vue_study 由于项目采用ES6语法进行开发，我们需要构建一个基于webpack的项目 1. npm init -y 2. npm install -D webpack webpack-command 然后创建代码结构,添加webp...
Vue双向绑定：原理篇（详细）
weixin_51670675的博客
04-09 2004
Vue的双向绑定（响应式）原理，包括数据劫持、依赖收集以及整体实现流程。除此之外，也对比Vue3的Proxy。
ES6基本的语法(七) 实现双向绑定（ES6 写法）
StevenTang957的博客
02-07 222
实现双向绑定（ES6 写法）Proxy（代理） & （映射）语法和基本使用语法基本使用简单的模拟双向绑定Proxy 的全部方法 Proxy（代理） & （映射） Proxy 是在对象之前设置一层“拦截”。外面对该对象的访问，都要先通过这层拦截，可以对外界的访问进行过滤和改写操作。用在这里表示由它来“代理”某些操作，可以译为“代理器”。 语法和基本使用 语法 const p = new Proxy(target, handler) // const p = new Proxy(目标对象,
JS ES6用Proxy模拟一个简单的数据双向绑定
weixin_48937623的博客
03-19 289
什么是数据双向绑定 双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。 接下来简单的模拟一下： <input type="text" id="myText"> <p id="myP"></p> <script> // 用proxy代理 模拟实现vue双向绑定 let myText =document.getElementById
ES6基本的语法(六) 实现双向绑定（ES5 写法）
StevenTang957的博客
02-05 281
实现双向绑定（ES5 写法）什么是双向绑定object.defineProperty描述符介绍存取描述符简单的模拟一下双向绑定数组双向绑定 什么是双向绑定 首先来说一下单向绑定，单向绑定就是把 Model 绑定到 View，当我们用 JS 代码更新 Model 时，View 就会自动更新。 有单向绑定，就有双向绑定。如果用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。 object.defineProperty Object.defineProperty 是 ES5 中双向绑定
Vue双向绑定原理及实现
Ms.杨
10-24 366
Vue双向绑定原理及实现双向绑定原理原理实现1. Observer2. Watcher3. Compile4. Vue模拟对象5. index.html 双向绑定原理 原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的 实现 首先，设置监听器Observer，对vue实例中的data数据进行劫持监听，核心方法就是Object.defineProperty()，递归遍历所有属性，添加get、set方法，其中利用订阅器Dep来收集订阅者，若访问属性则添加到订阅器，若数据变化则通知订阅
angular-2-numbers-game:通过实现倒计时数字游戏来玩转 Angular 2 和 ES6
06-09
该项目不仅展示了 Angular 2 的核心组件、服务和数据绑定功能，还体现了 ES6 的新特性，如类、箭头函数和模板字符串。 1. **Angular 2**: Angular 2 是一个流行的前端开发框架，用于构建可维护和高性能的单页应用...
h5+js+vue 模仿微信网页聊天界面
03-18
在项目中，Vue.js用于管理状态（如用户输入的消息和已发送的消息列表），以及实现视图与数据的双向绑定，使得界面能即时响应数据变化。 4. **Vue组件**：Vue组件是可复用的代码块，可以抽象出聊天界面中的各个部分...
Vue-boolflix
02-12
Vue的核心理念是通过简单的模板语法来实现数据和视图的双向绑定，这使得开发者可以更专注于业务逻辑，而不用过多地关注DOM操作。 在Vue-Boolflix项目中，我们将看到以下几个关键知识点： 1. **Vue实例**：每个Vue...
前端模块化CommonJS、AMD、CMD、ES6
警警的博客
07-23 951
在前端开发中，模块化是一种重要的代码组织方式，它有助于将复杂的代码拆分成可管理的小块，提高代码的可维护性和可重用性。CommonJS、AMD（异步模块定义）和CMD（通用模块定义）是三种不同的模块规范，它们在定义模块、加载模块以及依赖管理等方面存在差异，并适用于不同的场景。
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
vue3 的数据双向绑定原理
05-01
Vue3 的数据双向绑定原理是通过 Proxy 对象实现的。Proxy 对象是 ES6 中的新功能，它可以用来代理另一个对象，从而可以对这个对象进行监视和修改。在 Vue3 中，每一个组件都有一个用于数据存储的响应式对象。当这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值