一个简单的类似Vue的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="put">
<p id="out"></p>
<script>
var put = document.getElementById('put'),
out = document.getElementById('out');
var data = {}
Object.defineProperty(data,'value',{ //data的value值为input的值
get: function() {
return put.value;
},
set: function(newVal) { put.value = out.innerHTML = newVal;
console.log(put.value)
}
})
put.onkeyup = function() { //通过键盘事件改变span的文本内容同时改变data的value值
out.innerHTML = this.value;
console.log(data.value)
}
</script>
</body>
</html>
一个简单的类似Vue的双向绑定的更多相关文章
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 【Vue】vue的双向绑定原理及实现
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...
随机推荐
- POJ3784:Running Median
浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:http://poj.org/problem?id=3784 用一个"对顶堆& ...
- Poj 2304 Combination Lock(模拟顺、逆时钟开组合锁)
一.题目大意 模拟一个开组合的密码锁过程.就像电影你开保险箱一样,左转几圈右转几圈的就搞定了.这个牌子的锁呢,也有它独特的转法.这个锁呢,有一个转盘,刻度为0~39.在正北方向上有一个刻度指针.它的密 ...
- UVa11624(逃离火焰问题)
#include"cstdio" #include"queue" #include"cstring" using namespace std ...
- MAXOS安装FFMPEG
安装brew 安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins ...
- 解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题
刚装好SSMS 17.1准备体验,弹出: 一番搜索,普遍办法都是安装VS2015独立shell.删除某个注册表项什么的,没用,首先这个shell我是装了的,然后也没有那个注册表项.我自己尝试过重装sh ...
- 【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...
- win7 32位安装 python 及Numpy、scipy、matplotlib函数包
操作系统: win7 64位,但选择安装32位的python. 1,python下载安装 https://www.python.org/downloads/ 下载2.7版,一路下一步安装. 并在pat ...
- 14、SRA数据上传
1.ncbi登陆,进入SRA,进入new submission 2. 1)SUBMITTER 2)PROJECT TYPE Raw sequence reads 和 ranscriptome or G ...
- GCC源码编译
1. gcc源码下载 ftp://gcc.gnu.org/pub/gcc/releases/ [yhwang@yhwang ~] wget ftp://gcc.gnu.org/pub/gcc/rele ...
- 【vue2.X+iview2.x】iView在非 template/render 模式下标签的转化
iView在非 template/render 模式下标签的转化. 以下组件,在非 template/render 模式下组件名要分隔: DatePicker:date-picker FormItem ...