最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理
废话不多说直接看效果图
代码很好理解，但是在看代码之前需要知道Vue双向绑定的原理其实就是基于
Object.defineProperty 实现的双向绑定 官方传送门
这里我们用官方的话来说
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
参数
obj：
要在其上定义属性的对象。
prop：
要定义或修改的属性的名称。
descriptor：
将被定义或修改的属性描述符。
这里面要说的真的就太多了，我们就调双向绑定需要用到的说一下就可以了，需要了解更多的朋友可以进官网官网看更加详细的
这里我们就只是说一下 Object.defineProperty里面的核心的 get 和 set
get
let data ={} ;
let index = 1;
Object.defineProperty(data,"age",{ //不明白参数什么含义的请往上看咯
get:function(){
return index;//获取到了定义的index变量
}
})
console.log(data); // {age:1}
怎么样，是不是非常简单，那么我们趁热赶紧看一下set吧set
var data ={} ;
var index= 1;
Object.defineProperty(data,"age",{
get:function(){
return index;
},
set:function(newZhi){
index=newZhi;
}
})
console.log(data);// {age:1}
哈哈 是不是感觉和上面的get是一样的呢？用法都是一样的 那么楼主能来点不一样的嘛？
回答：可以
----------
Object.defineProperty(data,"age",{
get:function(){
return index;
},
set:function(newZhi){
index=newZhi+10;
}
})
console.log(data); // {age:11}既然Object.defineProperty里面的set和get看懂了就可以直接上手简单的双向绑定啦，这时候有的小伙伴可能就问了：什么？这么快？ 回答：就是这么快
直接贴代码 每一行都是有注释的 赶紧看看吧
<body>
<input type="text" id="inp"/>
<div id="text">我是测试数据的</div>
</body>
<script type="text/javascript">
const inp = document.getElementById("inp"),tex=document.getElementById("text"), data = {};//获取两个元素
Object.defineProperty(data,"name",{
get:function(){
return inp.value;//获取到文本框value输入的值
},
set:function(newdata){//接收到文本框value的值
tex.innerHTML = newdata;//div的值等于文本框的值
}
})
inp.addEventListener("keyup",function(e){//键盘按下的时候来实时同步
data.name = this.value;
})
</script>怎么样？是不是很简单呢 十行代码就完事了(当然只是简单的双向绑定，拓展性很强）
最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理的更多相关文章
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- Holding Bin-Laden Captive!（hdoj1085）代码并未完全看懂
We all know that Bin-Laden is a notorious terrorist, and he has disappeared for a long time. But rec ...
- c++17 代码你能看懂吗?
------------------------------------------------------------------------------ #include <vector&g ...
- PID算法原理 一图看懂PID的三个参数
找了好久这一篇算是很容易看懂的了 推荐给大家 写的十分清楚 原文作者DF创客社区virtualwiz LZ以前有个小小的理想,就是让手边的MCU自己"思考"起来,写出真正 ...
- 小白也能看懂的插件化DroidPlugin原理（二）-- 反射机制和Hook入门
前言:在上一篇博文<小白也能看懂的插件化DroidPlugin原理(一)-- 动态代理>中详细介绍了 DroidPlugin 原理中涉及到的动态代理模式,看完上篇博文后你就会发现原来动态代 ...
- 小白也能看懂的插件化DroidPlugin原理（三）-- 如何拦截startActivity方法
前言:在前两篇文章中分别介绍了动态代理.反射机制和Hook机制,如果对这些还不太了解的童鞋建议先去参考一下前两篇文章.经过了前面两篇文章的铺垫,终于可以玩点真刀实弹的了,本篇将会通过 Hook 掉 s ...
- 一图看懂hadoop分布式文件存储系统HDFS工作原理
一图看懂hadoop分布式文件存储系统HDFS工作原理
随机推荐
- CentOS 安装jdk 1.8
方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创建java目录 [root@localhost ~]# mkdir/usr/java [root@localhost ~ ...
- Git-T
或在命令行上创建一个新的存储库echo“#gittest”>> README.md git init git add README.md git commit -m“first commi ...
- String和ByteBuffer互转
String 转换 ByteBuffer: public static ByteBuffer getByteBuffer(String str) { return ByteBuffer.wrap(st ...
- npm install 报 128 错误
[问题描述] 项目执行npm install的时候特别慢,到最后直接返回错误: verbose exit [ 1, true ] [解决方法] 执行以下两条命令: git config --globa ...
- POJ - 3469 Dual Core CPU （最小割）
(点击此处查看原题) 题意介绍 在一个由核A和核B组成的双核CPU上执行N个任务,任务i在核A上执行,花费Ai,在核B上执行,花费为Bi,而某两个任务之间可能需要进数据交互,如果两个任务在同一个核上执 ...
- PHP,mysql,nginxunx中安装
一:安装PHP,mysql,nginx linux装软件方式: 1.源码安装:下载wget-->解压tar -zxvf -->配置 ./configure --->编译make -- ...
- Spring 中的bean 是线程安全的吗？
结论: 不是线程安全的 Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全的特性,但是具体还是要结合具体sco ...
- shell脚本之nginx启动脚本、统计日志字段、for循环实战、跳板机
1.NGINX启动脚本 #!/bin/bash # chkconfig: 235 32 62 # description: nginx [ -f /etc/init.d/functions ] &am ...
- Windows账户管理
windows账户管理 最近部署人员给我们提了一个需求,就是希望简化部署过程. 为了能够远程桌面控制终端电脑,他们需要为每台终端设置进行一些设置,例如创建用户名和密码,开启允许 远程桌面设置,以及开机 ...
- GridView中点击某行的任意位置就选中该行
GridView中点击某行的任意位置就选中该行 -- :: 分类: 第一步:添加选择列 点击GridView右边小尖头,双击CommandField,选中＂选择＂,添加,将起设置为不可见: 第二步:处 ...