废话不多说直接看效果图

代码很好理解，但是在看代码之前需要知道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写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理的更多相关文章

  1. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  2. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  3. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  4. 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 ...

  5. c++17 代码你能看懂吗?

    ------------------------------------------------------------------------------ #include <vector&g ...

  6. PID算法原理 一图看懂PID的三个参数

    找了好久这一篇算是很容易看懂的了  推荐给大家   写的十分清楚   原文作者DF创客社区virtualwiz LZ以前有个小小的理想,就是让手边的MCU自己"思考"起来,写出真正 ...

  7. 小白也能看懂的插件化DroidPlugin原理（二）-- 反射机制和Hook入门

    前言:在上一篇博文<小白也能看懂的插件化DroidPlugin原理(一)-- 动态代理>中详细介绍了 DroidPlugin 原理中涉及到的动态代理模式,看完上篇博文后你就会发现原来动态代 ...

  8. 小白也能看懂的插件化DroidPlugin原理（三）-- 如何拦截startActivity方法

    前言:在前两篇文章中分别介绍了动态代理.反射机制和Hook机制,如果对这些还不太了解的童鞋建议先去参考一下前两篇文章.经过了前面两篇文章的铺垫,终于可以玩点真刀实弹的了,本篇将会通过 Hook 掉 s ...

  9. 一图看懂hadoop分布式文件存储系统HDFS工作原理

    一图看懂hadoop分布式文件存储系统HDFS工作原理

随机推荐

  1. Linux (Ubuntu 18.04) 安装vim编辑器

    大家可以去Ubuntu官网下载桌面系统:https://ubuntu.com/download/desktop,虽然最新版是19.04,但是建议大家下载稳定版18.04.安装过程非常简洁,我使用的是V ...

  2. Appium，AirTest切换使用时，appium罢工之坑(1)

    由于一些元素不能定位,所以最近项目引用了Airtest 问题场景: case的开始使用appium,case执行过程中,切换到airtest操作元素,待执行完airtest相关步骤之后,后续使用app ...

  3. Python面试-DB相关

    昨日回顾: 面试 Python综述 设计哲学 版本变迁及发展 GIL 内存管理及垃圾回收 并发并行 昨日作业一:Python是否存在内存泄露 作业二:过往的项目中有没有出现过性能问题? 作业三:什么是 ...

  4. js继承的方式及其优缺点

    js继承方法 前因:ECMAScript不支持接口继承,只支持实现继承 一.原型链 概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,让 ...

  5. PTA(Basic Level)1047.编程团体赛

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...

  6. PTA(Basic Level)1032.挖掘机技术哪家强

    为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 105 的正整数 N,即参赛人数.随后 N ...

  7. mysql 构造连续的日期

    需求,我想以 年-月-日的格式,统计自 2019-08-20日 前10天的记录数,如果该天没有任何一条记录,则给予0 原始数据->我想要的结果集数据    ==============> ...

  8. sql server备份损坏

    sql server备份损坏 转自:https://www.cnblogs.com/zhijianliutang/p/4080916.html 1.备份文件和数据库放在同一个(或一组)的物理磁盘上.磁 ...

  9. [转帖]etcd 在超大规模数据场景下的性能优化

    etcd 在超大规模数据场景下的性能优化   阿里系统软件技术 2019-05-27 09:13:17 本文共5419个字,预计阅读需要14分钟. http://www.itpub.net/2019/ ...

  10. 如何获取字符串中某个具体的数值--通过json.load转化成字典形式获取

    r=requests.get('http://httpbin.org/get').text print(r) # print(type(r)) # 如果要获取User-Agent的详细数值,需要做JS ...