Vue2基础-理解MVVM模型（HTML版）

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、什么是MVVM模型？

  MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model代表的是模型，也可以在Model中定义数据修改和操作业务逻辑，View代表的是视图，他负责将数据模型转成UI显示出来，ViewModel是一个同步View和Model的对象。

  在MVVM架构下，View和Model之间是没有直接的联系，而是通过ViewModel来进行交互，Model和ViewModel之间的交互是双向的，因此View数据变化会同步到Model中，而Model的数据也会同步到View上。

  ViewModel通过双向数据绑定，把View层和Model层连接起来，而View和Model之间的同步工作是完全自动的，不需要人为干涉，因此开发者只需要关注业务逻辑，不需要动手操作DOM，不需要关注数据状态的同步问题。复杂的数据状态维护完全由MVVM来统一管理。

二、Vue中的MVVM模型

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：template 模板代码
3. VM：视图模型(ViewModel)：Vue实例

  在Vue中所有的data属性都会出现在vm身上，并且vm身上所有的属性及Vue原型身上的所有属性，都可以在Vue模板里使用。

	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学校名称：{{name}}</h1>
		<h1>学校地址：{{address}}</h1>
		<h1>测试一下2：{{$options}}</h1>
		<h1>测试一下3：{{$emit}}</h1>
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通