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 ...
随机推荐
- UniDBGrid增加显示记录数的label及隐藏refresh按钮
1. 在UniDBgrid的extEvent属性中写入以下代码: function OnAfterCreate(sender){ var toolbar=sender.getDockedItems() ...
- CentOS 7安装新版RabbitMQ解决Erlang 19.3版本依赖
通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...
- 关于调试WCF时引发的异常XmlException: Name cannot begin with the '<' character, hexadecimal value 0x3C” on Client Side
问题描述:在使用VS2015调试WCF时,偶遇抛出异常名称不能以“<”字符(十六进制0x3c)开头,平时运行时(不调试)没有问题的. 解决方法:检查后发现为了检查异常的位置,勾选了引发通用语言运 ...
- Swift5 语言指南(十八) 可选链接
可选链接是一个查询和调用当前可选的可选项的属性,方法和下标的过程nil.如果optional包含值,则属性,方法或下标调用成功; 如果是可选的nil,则返回属性,方法或下标调用nil.多个查询可以链接 ...
- docker：（2）通过Dockerfile构建镜像并发布web项目
上一篇讲解了docker的基本使用 http://www.cnblogs.com/xiaochangwei/p/8204511.html 虽然通过修改获取到的镜像可以达到使用目的,但是多操作几次就会发 ...
- OpenCL科普及在ubuntu 16.04 LTS上的安装
OpenCL(Open Computing Language,开放计算语言)是一个为异构平台编写程序的框架,此异构平台可由CPU.GPU.DSP.FPGA或其他类型的处理器與硬體加速器所组成.Open ...
- Linux - 修改内核启动顺序及删除无用内核
现象: CentOS7开机启动界面显示多个内核选项 原因: 正常情况下,有两个启动项,一个是"正常启动",另一个是"救援模式启动"(rescue). 如果启动项 ...
- centos7不小心删除了/etc/yum.repos.d/CentOS-Base.repo文件..........
一步小心使用rm -rf /etc/yum.repos.d/CentOS-Base.repo 删除了base.repo文件,导致使用yum安装时报错. 解决如下,使用阿里云的镜像: wget -O / ...
- vue 项目记录.路飞学城(一)
前情提要: 通过vue 搭建路飞学城记录 一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...
- LeetCode--No.004 Median of Two Sorted Arrays
4. Median of Two Sorted Arrays Total Accepted: 104147 Total Submissions: 539044 Difficulty: Hard The ...