废话不多说直接看效果图

代码很好理解，但是在看代码之前需要知道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. Mac下的Pycharm教程

    除非你是用记事本写代码,或者用vim写代码的大牛,那么推荐使用PyCharm编写Python代码. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效 ...

  2. 【linux开发】IO端口和IO内存的区别及分别使用的函数接口

    IO端口和IO内存的区别及分别使用的函数接口 每个外设都是通过读写其寄存器来控制的.外设寄存器也称为I/O端口,通常包括:控制寄存器.状态寄存器和数据寄存器三大类.根据访问外设寄存器的不同方式,可以把 ...

  3. 【python基础学习】---解析多层json，解析xml

    1.以豆瓣的API接口为例子,解析返回的json数据 https://api.douban.com/v2/book/1220502 { "rating":{ "max&q ...

  4. C语言 俄罗斯方块的实现1 全局变量

    目录 全局变量 程序的模块化之MVC 关于俄罗斯方块的代码实现要点 使用数组表示背景和方块 方块表示及其初始化 要让游戏动起来 方块自动下落 全局变量 简而言之,定义在函数外的变量,就是全局变量. 所 ...

  5. ioctl接口内容操作

    int ioctl( int fd, int request, .../* void *arg */ ) 详解 第三个参数总是一个指针,但指针的类型依赖于request 参数.我们可以把和网络相关的请 ...

  6. 从入门到自闭之Python序列化

    序列化(背) json :将数据类型转换成字符串(序列化),将字符串装换成原数据类型(反序列),支持dict,list,tuple等,序列后都变成了列表 dumps,loads ------ 用于网络 ...

  7. windows系统下nginx+tomcat+redis做负载均衡和session粘滞附整套解决方案

    Nginx: 在nginx-1.8.0\conf目录下找到nginx.conf文件,打开文件修改文件中http{}中的内容,在http{}中加入 upstream localhost  { serve ...

  8. 枚举类型C语言规律用法总结

    注:以下全部代码的执行环境为VC++ 6.0 在程序中,可能需要为某些整数定义一个别名,我们可以利用预处理指令#define来完成这项工作,您的代码可能是: #define MON  1#define ...

  9. 类的函数成员之属性property

    属性命名采用Pascal命名方式,每个单词的首字母大写.访问方式与访问类的公共字段类似. /// <summary> /// 字段 /// </summary> private ...

  10. 06 Nginx

    1.检查linux上是否通过yum安装了nginx rpm -qi nginx 2.解决安装nginx所依赖包 yum install gcc patch libffi-devel python-de ...