body部分很简单,一个输入框和一个展示的div

<div>
<p>你好,<input id='nickName'></p>
<div id="introduce"></div>
</div>

逻辑部分

    <script>
var userInfo = {};
var a = '';
var inp = document.getElementById('nickName');
var odiv = document.getElementById('introduce');
Object.defineProperty(userInfo, "nickName", {
get: function(){
return inp.value;
},
set: function(nick){ }
});
Object.defineProperty(userInfo, "introduce", {
get: function(){ },
set: function(introduce){
odiv.innerHTML = introduce;
}
}) inp.addEventListener("keyup",function(){
userInfo.introduce = userInfo.nickName;
}) </script>

效果是

利用Object.defineProperty实现Vue数据双向绑定的更多相关文章

  1. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  2. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  3. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  4. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  6. vue数据双向绑定的原理、虚拟dom的原理

    vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...

  7. Vue数据双向绑定(面试必备) 极简版

    我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...

  8. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

随机推荐

  1. Nginx+tomcat配置负载均衡集群

    操作系统版本:Centos 6.4 Nginx版本:nginx-1.3.15.tar.gz wget http://nginx.org/download/nginx-1.5.9.tar.gz JDK版 ...

  2. selinux-网络服务安全

    一.显示和设置selinux [root@localhost ~]# vim /etc/sysconfig/selinux //强制模式 许可模式 禁用模式 [root@localhost ~]# g ...

  3. 我的第一次NGS分析操作

    部分参考自:生物信息学100个基础问题 —— 番外2: 用Anaconda快速搭建生物信息学分析平台 - 孟浩巍的文章 - 知乎 https://zhuanlan.zhihu.com/p/357114 ...

  4. 等待事件对应的p1,p2,p3含义

    Oracle 10g v$session视图中不同等待事件对应的p1,p2,p3的含义也不同,我们不可能记住所有等待事件对应的p1,p2,p3的含义. 可以通过查询V$EVENT_NAME知道每个等待 ...

  5. C++学习笔记-const和static

    const 1.使用const来定义常量 const int num = 10; //应该在声明时进行初始化,否则该常量的值是不确定的,而且无法修改 2.const与指针 指向常量的指针(const修 ...

  6. Junit 并行执行测试

    从Junit4.7开始可以并行运行测试. 必须设置parallel 参数,可以改变threadCount或useUnlimitedThreads属性. 测试中指定了parallel,项目使用的是 JU ...

  7. import MySQLdb 与 import mysql 有什么区别?

    MySQLdb 只支持Python 2.* ,暂时还不支持3.* 可以用PyMySQL 代替,把__init__.py 中添加俩行: import pymysql pymysql.install_as ...

  8. python全栈开发从入门到放弃之迭代器生成器

    1.python中的for循环 l = [1,2,3,4,5,6] for i in l: #根据索引取值 print(i) 输出结果: 1 2 3 4 5 6 2.iterable  可迭代的 可迭 ...

  9. XE6移动开发环境搭建之IOS篇(7):在Mac OSX 10.8中安装XE6的PAServer(有图有真相)

    XE6移动开发环境搭建之IOS篇(7):在Mac OSX 10.8中安装XE6的PAServer(有图有真相) 2014-08-22 21:06 网上能找到的关于Delphi XE系列的移动开发环境的 ...

  10. jQuery Ajax使用总结

    一.概述 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()是属于最底层的方法,第2层是load().$.get()和$.post()方法,第三层是$.getScript()和$. ...