<!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. JavaScript变态题目

    刚才发现的一些变态的 JavaScript 题目,做了一下,只对了一半,特此发到园子里,和友友们分享一下.这些题目都是针对 Ecmascript 第三版的,原题里面全部都是选择题,有备选答案,这里我把 ...

  2. 如何理解IPD+CMMI+Scrum一体化研发管理解决方案之IPD篇

    如何快速响应市场的变化,如何推出更有竞争力的产品,如何在竞争中脱颖而出,是国内研发企业普遍面临的核心问题,为了解决这些问题,越来越多的企业开始重视创新与研发管理,加强研发过程的规范化,集成产品开发(I ...

  3. 【算法设计与数据结构】为何程序员喜欢将INF设置为0x3f3f3f3f？(转)

    摘自https://blog.csdn.net/jiange_zh/article/details/50198097 在算法竞赛中,我们常常需要用到一个“无穷大”的值,对于我来说,大多数时间我会根据具 ...

  4. C++ STL栈和队列

    在C++标准库(STL)中,实现了栈和队列,方便使用,在这里我整理了一下笔记,作简要介绍. 1,栈(stack): 头文件 : #include<stack> 定义栈 :stack< ...

  5. Thunder团队——bug修正

    团队:欢迎来怼 发现的问题: 1.首先用户通过爱阅APP内部的网址跳转到各大电子书网站时,需要额外启动手机自身浏览器:就以豆瓣网为例,阅读豆瓣网上的一些书籍,是跳转到手机自带浏览器的,APP内部提供的 ...

  6. Unicode和UTF-8

    作者:于洋链接:https://www.zhihu.com/question/23374078/answer/69732605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  7. 安装Ubuntu 16.04双系统详解（Nvidia显卡）

    Ubuntu16.04双系统安装 一.准备工作 设备:惠普台式机,i5-7400.8G内存.1T机械硬盘.NVIDIA GTX1050显卡.预装系统:Win10. 1.下载ubuntu镜像文件,本人使 ...

  8. 常用IDE插件

    Visual Studio 常用 Refactoring Essentials:代码重构分析 Roslynator:代码重构 CodeMaid:代码格式化 Github Extension for V ...

  9. 201621123037 《Java程序设计》第3周学习总结

    #Week03-面向对象入门 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联 ...

  10. cli 中php的配置和phpinfo不一样

    这是因为加载的php.ini的路径不一样 可以通过查看 php -i | grep php.ini 来确定两个加载的配置路径是一样的 win中没有grep的命令,可以把php -i 的内容重定向输出到 ...