1.MVVM模型
MVVM 模型 全称为 Model-View-ViewModel，是一种架构模式，用于分离用户界面与业务逻辑。
严格MVVM 模型要求View不能和Model直接通信，而Vue提供$refs 属性，让Model直接操作View，违反规定，所以说Vue没有完全遵循MVVM 模型。
Vue虽然没有完全遵循 MVVM 模型，但设计也受到了它的启发。因此在文档中经常会使用
vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。它由三部分组成：
M：模型（Model）：Model代表应用程序中的数据和业务逻辑，可以理解为data中的数据；
V：视图（View）：View是用户直接看到和交互的界面，可以理解为模板代码；
VM：视图模型（ViewModel）：
ViewModel是MVVM模式的核心部分，它起到了连接Model和View的桥梁作用。一方面，它从Model获取数据并进行处理，转换为适合View展示的格式；另一方面，它接收View的用户输入事件，经过处理后更新Model。可以理解为Vue实例。
2.通过案例理解MVVM模型
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MVVM模型</title>
<!-- 引入开发版vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app">
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
<!-- vm身上所有的属性及vue原型上的所有属性，在vue模板中都可以直接使用 -->
<h3>测试1：{{$options}}</h3>
<h3>测试2：{{$emit}}</h3>
<h3>测试3：{{_data}}</h3>
</div>
<script type="text/javascript">
//创建vue实例
const vm = new Vue({
data() {
return {
name: "大学校",
address: "北京",
};
},
});
console.log(vm)
vm.$mount("#app");
</script>
</body>
</html>
观察发现：
1.data中的所有属性，最后都出现在了vm身上；
2.vm身上所有的属性及vue原型上的所有属性，在vue模板中都可以直接使用。
