利用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 ...
随机推荐
- 【tensorflow】
运行计算图 session.run() https://blog.csdn.net/sinat_39372048/article/details/80868168 赋值 tf.assign() tf. ...
- SqueezeNet
虽然网络性能得到了提高,但随之而来的就是效率问题(AlexNet VGG GoogLeNet Resnet DenseNet) 效率问题主要是模型的存储问题和模型进行预测的速度问题. Model Co ...
- ovn-architecture 摘要
OVN架构图如下所示: 1.OVN Southbound Database由以下三种数据构成: Physical Network(PN)table用于确定如何到达hypervisor以及其他node ...
- HttpRunner 参数化数据驱动
HttpRunner 2.0 参数化数据驱动案例,废话不说,直接上干货. 1.测试用例目录结构 api:接口集 testcases:测试用例 testsuites:测试套件 data: ...
- 如何停止requestAnimationFrame方法启动的动画
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了:(1) 你可以用CSS3的animattion+keyframes;(2) 你也可以用css3的transition; (3) 你还 ...
- Spark 2.0 PCA主成份分析
PCA在Spark2.0中用法比较简单,只需要设置: .setInputCol(“features”)//保证输入是特征值向量 .setOutputCol(“pcaFeatures”)//输出 .se ...
- win10专业版密钥激活
win10专业版密钥激活 1.查看激活状态,win按键>设置(左下角倒数第二个)>更新和安全>激活---------提示没有有效密钥,需要激活 2.管理员身份打开cmd,搜索框输入c ...
- SpringMVC的其他功能使用
一.SpringMVC支持在控制器的业务方法中写入参数作为传递过来的变量 @Controller @RequestMapping(value="/kaiye") public cl ...
- Spring整合jdbc编程
一.Spring对Jdbc的支持 Spring为了提供对Jdbc的支持,在Jdbc API的基础上封装了一套实现,以此建立一个 JDBC 存取框架. 作为 Spring JDBC 框架的核心, ...
- web Servlet 3.0 新特性之web模块化编程,web-fragment.xml编写及打jar包
web Servlet 3.0 模块化 原本一个web应用的任何配置都需要在web.xml中进行,因此会使得web.xml变得很混乱,而且灵活性差,因此Servlet 3.0可以将每个Servlet. ...