Vue中的数据代理

最新推荐文章于 2024-09-12 21:11:58 发布

NL_LIU

最新推荐文章于 2024-09-12 21:11:58 发布

阅读量34

点赞数

分类专栏： VUE学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sddycai/article/details/134162936

版权

VUE学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

               1.Vue中的数据代理：
                           通过vm对象来代理data对象中属性的操作（读/写）
               2.Vue中数据代理的好处：
                           更加方便的操作data中的数据
               3.基本原理：
                           通过Object.defineProperty()把data对象中所有属性添加到vm上。
                           为每一个添加到vm上的属性，都指定一个getter/setter。
                           在getter/setter内部去操作（读/写）data中对应的属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'测试',
				address:'上海'
			}
		})
	</script>
</html>

NL_LIU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的数据代理

通过Object.defineProperty()把data对象中所有属性添加到vm上。在getter/setter内部去操作（读/写）data中对应的属性。为每一个添加到vm上的属性，都指定一个getter/setter。通过vm对象来代理data对象中属性的操作（读/写）更加方便的操作data中的数据。
复制链接

扫一扫

专栏目录