先上效果图

简单的实现数据的双向绑定
首先来了解一个东西：Object.defineProperty()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

这里是MDN对这个的详细说明
简单点说：

这个方法可以修改现有对象属性的值

Object.defineProperty(obj, prop, descriptor)

参数说明：

    obj：定义属性的对象

    prop：修改的属性

    descriptor:修改的属性描述符

这边只挑最简单的说，

get:

官方：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。

**简单的说：当你需要取对象的属性值时，就是来调用这个函数，取到值的**

set：

官方：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

**简单的说：当你需要设置（改变）对象的属性值时，就是来调用这个函数，达到修改的**

接下来上代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

    </head>

    <body>

        <div id="aa"></div>

        <div>

            <input type="text" oninput="changedata(this.value)">

        </div>

        <script>

            var data = {};

            var dom_aa = document.getElementById("aa")

            function changedata(value){

                data.a = value

            }

            //直接使用Object.defineProperty里面的set方法进行视图改变

            Object.defineProperty(data,"a",{

                set:function(newValue){

                    dom_aa.innerHTML = newValue;

                },

                get:function(){

                    return a;

                }

            })

        </script>

    </body>

</html>

这段代码拷贝直接运行

vue双向绑定原理（简单实现原理附demo）的更多相关文章

  1. vue双向绑定的简单实现（原创）

    简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...

  2. vue实现双向绑定的简单原理: defineProperty

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  4. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  5. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  6. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  7. Vue双向绑定的实现原理系列（一）：Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  8. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  9. Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher

    监听器Observer和订阅者Watcher 实现简单版Vue的过程,主要实现{{}}.v-model和事件指令的功能 主要分为三个部分 github源码 1.数据监听器Observer,能够对数据对 ...

  10. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

随机推荐

  1. [DS+Algo] 002 一维表结构

    目录 1. 顺序表 1.1 分类 1.2 实现方式 1.3 扩容问题 1.4 操作 2. 链表 2.1 分类 2.2 链表相关操作 2.3 链表 VS 顺序表 3. 关于代码实现 1. 顺序表 1.1 ...

  2. js--事件--事件代理

    js--事件--事件代理:https://blog.csdn.net/github_34514750/article/details/53067133

  3. python中，a=10.0 b=10.0 a is b 为什么输出是false

    >>>a=10.0>>>b=10.0>>>a is bFalse为什么当a=10,b=10时,a is b输出的是True呢? >>& ...

  4. vue表单校验（三）

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  5. 计算机体系结构总结_Pipeline

    Textbook:<计算机组成与设计——硬件/软件接口>  HI<计算机体系结构——量化研究方法>          QR 在前面一节里我们有了一块简单的RISC CPU,包括 ...

  6. spring整合apache-shiro的简单使用

    这里不对shiro进行介绍,介绍什么的没有意义 初学初用,不求甚解,简单使用 一.导入jar包(引入坐标) <!--shiro和spring整合--> <dependency> ...

  7. vue解决开发时候跨域问题

    vue项目/config/index.js 找到dev对象,增加如下代码 proxyTable: { '/api': { target: 'http://192.168.1.208:8888', ch ...

  8. dom的节点操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 56. Merge Intervals (JAVA)

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  10. linux后台运行springboot项目

    首先需要进到自己springboot项目的根目录,然后执行如下linux命令 nohup java -jar 自己的springboot项目.jar >日志文件名.log 2>&1 ...