最近老是有兄弟问我，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工作原理
随机推荐
- Linux 学习路径
Linux learning path Mind Map graph LR A[Linux学习路径]-->b[计算机概论与硬件相关知识] A -->c[Linux 初级] A --> ...
- FastAdmin-T
FastAdmin 注意食用姿势,建议先通读官方文档一次,在看 根据环境及配置的不同,仅作参考 修改mysql表注释ALTER TABLE student COMMENT '学生表'; fastadm ...
- PJzhang:ping命令的基本用法
猫宁!!! 参考链接:https://www.cnblogs.com/diantong/p/9626751.html http://aiezu.com/article/linux_ping_comma ...
- 'Python.exe' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
说明python不能被调用,需要为他制定正确的路径.0=0(win10想要打开任何东西,左下角搜索框) 1.打开 python,输入import os 输入os.getcwd,得到路径. 2.打开 编 ...
- EL表达式的11隐含对象
EL表达式在不同范围如何取值: <% pageContext.setAttribute("book", "红楼梦"); request.setAttrib ...
- 用IDEA开发Spring程序
操作步骤 https://www.cnblogs.com/zyx110/p/11023218.html
- 多线程--CreateThread与_beginthreadex本质区别
转载 MoreWindows: 秒杀多线程第二篇 本文将带领你与多线程作第一次亲密接触,并深入分析 CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程 ...
- Servlet请求和响应
在Java Web中Servlet.请求和响应是最基本的三个对象,在Web容器的管理下,这三者能够完成基本的HTTP请求处理. Servlet的作用是为客户提供服务.servlet的角色是接受一个客户 ...
- 【面试向】hihoCoder 1994 树与落叶
题目链接 Implementation int n, q; scan(n,q); vi p(n + 1); vi nson(n + 1); up (i, 1, n) { scan(p[i]); nso ...
- Go语言流程控制（六）
go语言的流程控制主要有if , for和switch. if else(分支结构) go语言的if判断: func main() { score:=65 if score>=90{ fmt.P ...