【手写】MVVM原理1

最新推荐文章于 2021-07-12 10:31:27 发布

原创最新推荐文章于 2021-07-12 10:31:27 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

版权归作者所有，如需转载，请联系作者

文章标签：

#MVVM #VUE #订阅发布 #双向数据绑定 #原理

前端同时被 2 个专栏收录

68 篇文章

订阅专栏

MVVM

5 篇文章

订阅专栏

此博客主要围绕VUE展开，涉及MVVM、订阅发布等内容，着重阐述双向数据绑定原理，虽目前仅简单呈现原理，后续会补充详细解说。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚写的原理，先放上来再说，后续补充解说

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MVVM</title>
</head>
<body>
	<div id="app">
		<!-- 双向数据绑定 靠的是表单元素 -->
		<input type="text" v-model="message.a">
		<div>{{message.a}}{{message.name}}</div>
		<ul>
			<li>{{time}}</li>
		</ul>
	</div>
	<script type="text/javascript" src="./watcher.js"></script>
	<script type="text/javascript" src="./observer.js"></script>
	<script type="text/javascript" src="./compile.js"></script>
	<script type="text/javascript" src="./MVVM.js"></script>
	<script type="text/javascript">
		let vm = new MVVM({
			el:"#app",
			data:{
				message:{
					a:'hello',
					name:"yuhua"
				},
				time:"今天"
			}
		})
	</script>
</body>
</html>