vue实现双向绑定的简单原理: defineProperty
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue双向绑定的原理测试</title>
</head> <body>
手写一个简单双向绑定<br />
<input type="text" id="model"><br />
<div id="modelText"></div>
<script>
/*
* @Author: 曾经的水哥 https://www.cnblogs.com/cengjingdeshuige/
* @Date: 2018-09-25 15:14:59
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-09-25 15:15:50
*/ var user = {};
var defaultName = '2222222222ssas'
var model = document.querySelector("#model")
var modelText = document.querySelector("#modelText");
model.value = defaultName
modelText.textContent = defaultName // 定义属性 监控改变
Object.defineProperty(user, 'name', {
get: function () {
console.log('获取值')
return defaultName
},
set: function (newValue) {
console.log('设置新的值')
defaultName = newValue
model.value = newValue
modelText.textContent = newValue
}
}) model.addEventListener('keyup', function () {
user.name = this.value
console.log('取值')
}, false) // 获取值
console.log(user.name)
</script>
</body> </html>
vue实现双向绑定的简单原理: defineProperty的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- Vue双向绑定的实现原理系列（一）：Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- Vue双向绑定的实现原理及简单实现
vue数据双向绑定原理 vue数据双向绑定是通过(数据劫持)+(发布者-订阅者模式)的方式来实现的,而所谓的数据劫持就是通过Object.defineProperty() 来实现的,所谓的Obje ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue双向绑定的简单实现（原创）
简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...
随机推荐
- SDWebImage之SDWebImageDownloader
SDWebImageDownloader完成了对网络图片的异步下载工作,准确说这个类是一个文件下载的工具类,真正的网络请求是在继承于NSOperation的SDWebImageDownloaderOp ...
- 基于 Keras 的 LSTM 时间序列分析——以苹果股价预测为例
简介 时间序列简单的说就是各时间点上形成的数值序列,时间序列分析就是通过观察历史数据预测未来的值.预测未来股价走势是一个再好不过的例子了.在本文中,我们将看到如何在递归神经网络的帮助下执行时间序列分析 ...
- 机器学习技法笔记：14 Radial Basis Function Network
Roadmap RBF Network Hypothesis RBF Network Learning k-Means Algorithm k-Means and RBF Network in Act ...
- python中使用for循环，while循环，一条命令打印99乘法表
用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10): for j in range(1,10): print(j,"x& ...
- linux系统学习方法分享
初学者可以自己安装虚拟机,然后把 linux 常用命令例如 cd.ls.chmod.useradd.vi 等等多练习几十遍,把自己敲打命令的熟练程度提升上来.然后根据文档搭建 Linux 下常见的各种 ...
- Centos 7 Asp.net core 使用QRCoder 报“Unable to load DLL 'gdiplus'"
环境: Centos7 .Net core 2.0 问题: 使用QRCoder 报“Unable to load DLL 'gdiplus'" 同 https://q.cnblogs.com ...
- Jenkins系列之二——centos 6.9 + JenKins 安装
centos 6.9 + JenKins 安装记录环境: [root@localhost ~]# cat /etc/issue CentOS release 6.9 (Final) Kernel \r ...
- Django--Session 操作
Session Session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要 ...
- 对nginx中location的认识
关于一些对location认识的误区 1.location的匹配顺序是“先匹配正则,在匹配普通”. location的匹配顺序其实是“先匹配普通,在匹配正则”.造成误解的原因是:正则匹配会覆盖普通匹配 ...
- 如何理解 Linux 中的 load averages
原文:https://mp.weixin.qq.com/s?src=11×tamp=1533697106&ver=1047&signature=poqrJFfcNAB ...