MVVM模型的理解

MVVM是 Model-View-ViewModel的缩写，即模型-视图-视图模型。MVVM 是一种设计思想。

模型（Model）：数据保存—存放着各种数据，有的是固定写死的，大多数是从后端返回的数据
视图（View）：用户界面，也就是DOM
视图模型（View-Model）:连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div id="app">
		            <h2>{
   
   {name}}</h2>      		<!-- V：视图(View):模板 -->
					<h2>{
   
   {age}}</h2>
				</div>
				<script src="vue.js"></script>
				<script>
					const vm = new Vue({ 			//VM：视图模型(ViewModel)也就是Vue实例对象
						el: "#app",
						data() {					//M:模型(Model):对应data中的数据
							return {
								name:'张三',
								age:30
							}
						},
						methods: {
		                 
						},
						computed:{
							
						}
					})
				</script>
	</body>
</html>

猜你喜欢