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. nsq小试牛刀-0.3.0 API变更

    NSQ是由知名短链接服务商bitly用Go语言开发的实时消息处理系统,具有高性能.高可靠.无视单点故障等优点,是一个非常不错的新兴的消息队列解决方案. nsg易于配置和部署,所有参考都通过命令行指定, ...

  2. python数据分析基础——numpy和matplotlib

    numpy库是python的一个著名的科学计算库,本文是一个quickstart. 引入:计算BMI BMI = 体重(kg)/身高(m)^2假如有如下几组体重和身高数据,让求每组数据的BMI值: w ...

  3. puma 配置,启动脚本

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/menxu_work/article/details/24547923 配置: puma_server ...

  4. MySQL8.0新特性

    一.修改密码修改root密码之前要先flush privileges;ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'f ...

  5. UVA10341:Solve It(二分+math.h库)

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/E 题目要求:p*e-x+ q*sin(x) + r*co ...

  6. Java 7 新增功能

    Java 7 新增功能如下: 对二进制整数的支持,以0b或0B开头. 在数值中可以使用下划线,不管是整型数值,还是浮点型数值,都可以自由地使用下划线,这样可以直观地分辨数值常量中到底包含多少位.如:3 ...

  7. JVM生命周期

    JVM生命周期可以分为以下三个阶段 启动:任何class文件的main函数都可认为是jvm示例的起点. 运行:以main函数为起点,后续的线程都由它启动,包括守护线程和用户线程.main方法启动的线程 ...

  8. 20165324 Java实验四 Android程序设计

    20165324 Java实验四 Android程序设计 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:何春江 学号:20165324 指导教师:娄嘉鹏 实验日期:2018年5月1 ...

  9. C++实现去掉string字符串前后的空白字符

    C++标准库提供的字符串类string没有提供类似CString中Trim方法,该方法功能为去除字符串前后的空白字符.利用string自身一些方法可以很容易实现该功能. 如下: void Trim(s ...

  10. DEPHI XE5 XE6 ANDROID IOS开发的几点体会

    DEPHI XE5 XE6 ANDROID IOS开发的几点体会 2014-09-04 20:48 1.不纠结于APK或者APP的大小.现在的客户端设备都很廉价,300元以上的新安卓设备都不在乎软件的 ...