最近老是有兄弟问我，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工作原理
随机推荐
- python高级 之(三) --- 高阶函数
高阶函数 map函数 简介 """ map(func,*iterables) 参数:一个是函数.一个是序列 作用:将序列中的元素依此作用于函数,将函数运行结果返回 存放于 ...
- umask的一般用法
常常会遇到我的Linux系统默认的八进制的umask值是0022,而我创建的文件的八进制权限却是644,这个是怎么一回事? umask值只是一个掩码,它会屏蔽掉掉不想授予该安全级别的权限. 用法是要把 ...
- 记录一次MySQL进程崩溃，无法重启故障排查
最近程序在跑着没几天,突然访问不了,查看应用进程都还在.只有数据库的进程down掉了.于是找到日志文件看到如下错误 -- :: [Note] InnoDB: Initializing buffer p ...
- linux中su和sudo区别
su切换用户,切换成root用户,要输入root用户的密码 su - 用户名 sudo 涉及到 /etc/sudoers文件 ,内容如下: # User privilege specificatio ...
- [xpath] text()和string()区别
质区别 text()是一个node test,而string()是一个函数,data()是一个函数且可以保留数据类型.此外,还有点号(.)表示当前节点. 使用要点 XML例子: <book> ...
- Spring Boot 五种热部署方式，极速开发就是生产力！
1.模板热部署 在 Spring Boot 中,模板引擎的页面默认是开启缓存的,如果修改了页面的内容,则刷新页面是得不到修改后的页面的,因此我们可以在application.properties中关闭 ...
- C# 面向对象3 静态和非静态的区别
静态和非静态的区别 1.在非静态类中,既可以有实例成员(非静态成员),也可以有静态成员. 2.在调用实例成员的时候,需要使用对象名.实例成员; 在调用静态成员的时候,需要使用类名.静态成员名; 总结: ...
- luogu题解 P2419 【牛大赛Cow Contest】传递丢包
题目链接: https://www.luogu.org/problemnew/show/P2419 分析: "在交际网络中,给定若干元素和若干对二元关系,且关系具有传递性. 通过传递性推导出 ...
- scala新版本学习(3)
1.REPL:读取->求值->打印->循环.Scala程序将输入的内容快速的编译成为字节码,然后字节码文件交给Java虚拟机进行执行. 2.val是值不可变,var值可变.在变量声明 ...
- python 模块使用
模块使用 定义:模块就像一个工具包一样,里面有很多工具(函数.类),使用时需要通过import导入. 分类: 标准库:random.sys.os.time 第三方:就是好人已经写好的特定功能的模块,你 ...