<!DOCTYPE html>

<html>

<head>

	<title>vue-双向数据绑定的简单实现</title>

</head>

<body>

	<input type="text" name="" id="inputText">

	<span id='textSpan'></span>

	<script type="text/javascript">

	let obj = {},

		inputText = document.querySelector('#inputText'),

		textSpan = document.querySelector('#textSpan')

	Object.defineProperty(obj, 'foo', {

		set: function (newValue) {

			inputText.value = newValue

			textSpan.innerHTML = newValue

		}

	})

	inputText.addEventListener('keyup', function (e) {

		obj.foo = e.target.value

	})

	</script>

</body>

</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. Scrum立会报告+燃尽图（十月二十日总第十一次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...

  2. RIGHT-BICEP测试第二次

    1.Right-结果是否正确? 正确 2.B-是否所有的边界条件都是正确的? 正确 3.P-是否满足性能要求? 部分满足 4.是否满足有无括号? 无 5.数字个数是否不超过十? 只是双目运算 6.能否 ...

  3. QT中文乱码解决方法

    由于我毕设的界面是用Qt做的,之前没怎么接触过Qt,所以实现过程中遇到不少小问题,头一个就是这个. 现如今宝宝将其记录下来,供同样有需要的同学或者自己以后方便查阅. 1.所有文件编码格式须一致 不统一 ...

  4. flask验证登录学习过程（1）---准备

    对应flask的接口开发,目前自己可以熟练的进行.但是深入到更基础的,从注册到验证登录的过程一直不是特别清楚. 趁着年度不是特别忙的时候,特意去学习加强一下.把这个过程记录在此处. 首先是规划一个项目 ...

  5. 2018软工实践—Alpha冲刺(8)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 多次测试软件运行 学习OPENMP ...

  6. 软工 · BETA 版冲刺前准备（团队）

    软工 · BETA 版冲刺前准备(团队) 过去存在的问题 组员之间缺乏沟通,前后端缺乏沟通协作 组员积极性不高 基础知识不够扎实 手动整合代码效率过低 我们已经做了哪些调整/改进 通过会议加强组员之间 ...

  7. jQuery之_元素滚动

    对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(doc ...

  8. 'phantomjs.exe' executable needs to be in PATH. (selenium PhantomJS python)

    今天selenium PhantomJS python用了下,发现报错,提示我:'phantomjs.exe' executable needs to be in PATH. from seleniu ...

  9. Socket 传一幅图片给另一个终端

    练习Socket传文件,先添加一个组件,简化socket发送和接收文件, 获取IP和端口的类 public static class AddressHelper { /// <summary&g ...

  10. Django 2.0 学习(18)：Django 缓存、信号和extra

    Django 缓存.信号和extra Django 缓存 由于Django是动态网站,所以每次请求均会去数据库进行相应的操作,当程序访问量大时,耗时必然会显著增加.最简单的解决方法是:使用缓存,缓存将 ...