1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>vue-双向数据绑定的简单实现</title>
  5. </head>
  6. <body>
  7. 	<input type="text" name="" id="inputText">
  8. 	<span id='textSpan'></span>
  9. 	<script type="text/javascript">
  10. 	let obj = {},
  11. 		inputText = document.querySelector('#inputText'),
  12. 		textSpan = document.querySelector('#textSpan')
  13. 	Object.defineProperty(obj, 'foo', {
  14. 		set: function (newValue) {
  15. 			inputText.value = newValue
  16. 			textSpan.innerHTML = newValue
  17. 		}
  18. 	})
  19. 	inputText.addEventListener('keyup', function (e) {
  20. 		obj.foo = e.target.value
  21. 	})
  22. 	</script>
  23. </body>
  24. </html>

　　

简单实现VUE的双向数据绑定的更多相关文章

  1. 应用defineProperty简单实现vue的双向数据绑定

    双向数据绑定简易版本如何应用defineProperty的getter setter 方法 有这样HTML片段 <input type="text" id="dem ...

  2. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  3. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  4. 面试题：你能写一个Vue的双向数据绑定吗？

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  6. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  7. vue的双向数据绑定实现原理（简单）

    如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的 ...

  8. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

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

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

随机推荐

  1. ORA-01747

    java.sql.SQLException: ORA-01747: user.table.column, table.column 或列说明 语法中多了逗号 或者字段使用关键字

  2. border、margin、padding三者的区别

    当你写前端的时候,肯定会遇到border,margin和padding这几个单词. 如: padding: 16px 0; margin: 0 10px; 在CSS中,他们是表示距离的东西,很多人刚开 ...

  3. linux awk,sort,uniq,wc,cut命令详解

    1.awk awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 $ 表示当前行 $ 表示第一列 NF 表示一共有多少列 $NF 表示最 ...

  4. CS小分队第二阶段冲刺站立会议（5月28日）

    昨日成果:昨天对我们的软件的主界面进行了思考,考虑到许多人建议我们团队添加可以自主增加软件快捷键的功能,我对这一想法的可行性和项目总体策划进行评估分析后,决定正式实施:已经完成从电脑上添加文件在我们的 ...

  5. HDU 5273 Dylans loves sequence 暴力递推

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5273 bc:http://bestcoder.hdu.edu.cn/contests/con ...

  6. React Native 学习－组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  7. PHP创建对象的几种形式

    创建对象的几种形式 class  C1{ var  $p1 = 1; //定义一个属性: } 形式1: $o1 = new C1(); //通过一个类,去new出一个对象 形式2: $o2 = new ...

  8. 数据库引擎InnoDB和MyISAM区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  9. 第87天：HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  10. 【.Net】win10 uwp unix timestamp 时间戳 转 DateTime

    有时候需要把网络的 unix timestamp 转为 C# 的 DateTime ,在 UWP 可以如何转换? 转换函数可以使用下面的代码 private static DateTime UnixT ...