利用Object.defineProperty实现Vue数据双向绑定
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数据双向绑定的更多相关文章
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- vue数据双向绑定的原理、虚拟dom的原理
vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...
- Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...
- vue数据双向绑定
Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
随机推荐
- Navicat连接mysql8出现1251错误
我的博客:www.yuehan.online 因为加密方式的问题,在使用mysql8.0的时候需要修改加密规则才能连接navicat. 打开cmd,输入以下命令: ALTER USER 'root ...
- Nginx+tomcat配置负载均衡集群
操作系统版本:Centos 6.4 Nginx版本:nginx-1.3.15.tar.gz wget http://nginx.org/download/nginx-1.5.9.tar.gz JDK版 ...
- python logging模块介绍
1.日志级别 日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR CRITICAL. DEBUG:详细的信息,通常只出现在诊断问题上 INFO:确认一切按预期运行 ...
- POJ2318:TOYS(叉积判断点和线段的关系+二分)&&POJ2398Toy Storage
题目:http://poj.org/problem?id=2318 题意: 给定一个如上的长方形箱子,中间有n条线段,将其分为n+1个区域,给定m个玩具的坐标,统计每个区域中的玩具个数.(其中这些线段 ...
- String,StringBuffer和StringBuilder的区别
面试的时候经常问到的一个题:这里先说明下三者在JVM中的执行速度:StringBuilder > StringBuffer > String,原因且看下面慢慢阐述. 首先看一个概念,为啥一 ...
- WKWebkit使用
webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safa ...
- windows安装redis, php5.5
全套安装包地址 http://download.csdn.net/detail/whellote/9572797 解压 redis-2.2.5-win32-win64, 将里面的内容拷贝到j:/r ...
- JqGrid 隐藏水平滚动条完美解决方案
我有强迫症,网上找的几个看着就不舒服 不用更改样式表,隐藏最右侧的边框. .ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; } 不用通过js控制加1px ...
- Cloudera Manager安装之时间服务器和时间客户端(二)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 高可用Mysql架构_Mycat集群部署(HAProxy + 两台Mycat+Mysql双主双从)
既然大家都知道了Mysql分布式在大型网站架构中的作用,在这里就不再阐述.本片博客文章是基于我曾经搭建过的一个Mysql集群基础上实现的,实现过双主热备.读写分离.分库分表. 博客链接:http:// ...