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. python 将日期戳(五位数时间)转换为标准时间

    5位数日期戳 读取 .mat 文件处理里面数据时,发现里面的日期数据全部都是 “5位数” 数字,很不解: 后来查到可以在excel中通过设置单元格调回标准日期格式,如下: 选中日期戳,右键选择 “格式 ...

  2. Flask系列(十一)整合Flask中的目录结构(sqlalchemy-utils)

    一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...

  3. MYSQL中,CAST函数的使用规则

    CAST函数语法规则是:Cast(字段名 as 转换的类型 ),其中类型可以为: CHAR[(N)] 字符型 DATE 日期型DATETIME 日期和时间型DECIMAL float型SIGNED i ...

  4. Spark2.0 协同过滤推荐

    ALS矩阵分解 http://blog.csdn.net/oucpowerman/article/details/49847979 http://www.open-open.com/lib/view/ ...

  5. 脚本其实很简单-windows配置核查程序(2)

    bat脚本是什么? 首先讲讲什么是命令行,在windows操作系统中,点击左下角的win图标,直接输入cmd搜索,左键点击进入命令行模式(或按键盘上的win键+r直接调出来命令行窗口). 在windo ...

  6. R语言之多重共线性的判别以及解决方法

    多重共线性(Multicollinearity)是指线性回归模型中的解释变量之间由于存在精确相关关系或高度相关关系而使模型估计失真或难以估计准确.   1.可以计算X矩阵的秩qr(X)$rank,如果 ...

  7. MongoDB简单CRUD场景

    MongoDB简单CRUD命令操作 (1)新建数据库:use 数据库名 (2)显示所有数据库:show dbs; (3)新建集合(两种方式)  隐式创建:在创建集合的同时往集合里面添加数据---db. ...

  8. 工作笔记——js与文件上传下载

    1 js判断上传文件的后缀名,文件大小 //判断照片大小 function getPhotoSize(obj){ photoExt=obj.value.substr(obj.value.lastInd ...

  9. 深拷贝与浅拷贝js,方法

    在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生. 参考 ...

  10. 端口状态说明 LISTENING、ESTABLISHED、TIME_WAIT及CLOSE_WAIT

    TCP状态转移要点    TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不会被释放.网络服务器程序要同时 ...