vue2.0数据双向绑定基本思路

最新推荐文章于 2024-04-25 16:14:29 发布

小马哥的天涯

最新推荐文章于 2024-04-25 16:14:29 发布

阅读量202

点赞数

分类专栏： vue实践 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41296616/article/details/105217482

版权

vue实践同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

大概思路监听------数据劫持 ------数据改变（展示给用户了）

大概思路监听------数据劫持 ------数据改变（展示给用户了）)

新建一个html 页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue2.0---数据双向绑定基本原理（defineProperty）</title>
	</head>
	<body>
		<div></div>
		<input type="text">
	</body>
</html>
<script type="text/javascript">
	let obj = {};
	function callBack(value) {
		document.querySelector('div').innerHTML = null;
		document.querySelector('div').innerHTML = value;
		document.querySelector('input').value = null;
		document.querySelector('input').value = value;
	}
	document.querySelector('input').addEventListener('input', function(e) {
		obj.msg = e.target.value
	})
	Object.defineProperty(obj, 'msg', {
		set(newValue) {
			// 触发setter给obj赋值
			value = newValue
			//执行劫持后的操作
			callBack(value)
		},
		get() {
			//返回获取属性值
			return value
		}
	})

</script>

在这里插入图片描述

原创不易如对你有用请不要吝啬你的点赞

小马哥的天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2.0数据双向绑定基本思路

大概思路监听------数据劫持 ------数据改变（展示给用户了）大概思路监听------数据劫持 ------数据改变（展示给用户了）)新建一个html 页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue2.0---数据双向绑定基...
复制链接

扫一扫