对MVVM的简单理解

最新推荐文章于 2025-05-11 21:25:46 发布

原创最新推荐文章于 2025-05-11 21:25:46 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#MVVM

前端专栏收录该内容

59 篇文章

订阅专栏

本文深入浅出地介绍了MVVM(Model-View-ViewModel)模式的概念及其在Vue.js中的应用。通过一个简单的示例代码，详细解释了MVVM模式中各部分的作用，即Model负责数据管理，View展示数据，而ViewModel则作为两者之间的桥梁。

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

1、什么是MVVM？

MVVM 是 Model-View-ViewModel 的缩写

为了更好地说明下面要讲解的内容，先给出一段简单的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
	<!-- MVVM 中的第二个 V，即 View-->
	<div id="app">
		{{ message }}
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
	  	el: '#app',
	  	//数据，其实就是 MVVM 中的第一个 M（Model）
	  	data: {
	    	message: 'Hello Vue!'
	 	 }
		})
	</script>
</body>
</html>