尤雨溪在开始设计Vue时，一定程度上参考了MVVM模型。

Vue官网说：Vue的设计，受到MVVM的启发。

在没有Vue时，MVVM这种架构模型已经存在了，不是尤雨溪缔造的这个模型，是他参考的这个模型，设计了Vue里面所特有的模型，重点是理解Vue里面的MVVM是分为几个部分的？每个部分是干嘛的？

一、`MVVM`模型

1、M：模型（Model）：对应data中的数据

2、V：视图（View）：模板

3、VM：视图模型（ViewModel）：Vue实例对象

前端主流的框架设计都是这个思想，把数据放到要求放好的位置，然后写出模板代码，模板里面具体往里面（页面）插入值，需要学习框架的语法，是指令、插值语法等。然后框架开始工作，就可以把数据和页面模板展示建立起来连接。数据里面怎么改变，页面中使用到该数据的地方就随之自动发生改变，自动更新。ViewModule帮助我们干了很多繁重的事情。

<body>
<!-- 视图、模型、就是View，数据放到页面上，数据可以修改 -->
<div id="root">
<!-- 展示学校信息 -->
  <h1>学校名称：{{school.name}}</h1>
<!-- 展示学校地址 -->
  <h1>学校地址：{{school.address}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
<!-- ViewModule，数据的经过者，中间桥梁作用，页面数据映射回来的人 -->
  const vm = new Vue({
    el:'#root',
    //data、模型、数据放这里，数据映射回来可以更改
    data:{
      school:{
        name:'昆一中',
        address:'云南省昆明市'
      }
    }
  })
  console.log(vm)//生成Vue对象
</script>
</body>

View层：

视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
V：视图(View) ：模板
    模板代码

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
M：模型(Model) ：对应 data 中的数据

VueModel层：

视图模型层
视图模型层是View和Model沟通的桥梁。
VM：视图模型(ViewModel) ： Vue 实例对象
VM是View和Model之间的通信的桥梁。
自动展示数据到View。
可以监听View里面是数据。

一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

观察发现：

（1）data中所有的属性，最后都出现在vm身上。------>其中，使用到数据代理proxy
（2）vm身上所有的属性及Vue原型上所有的属性，在 Vue模板中都可以直接使用。

控制台展示vm：

Vue模板语法中可以写：不仅仅是vm身上都能使用，而且出现在Vue原型（[[Prototype]]: Object）上的东西，也可以直接使用

  <h1>Vue模板中可以写运算表达式：{{1+2}}</h1>
<!--  data中的数据也是展示到了vm身上了-->
  <h1>所有vm身上的属性都可以在这里看到{{school.name}}</h1>
  <h1>写一个teache属性是vm身上没有的，所以会报错{{teacher}}</h1>
  <h1>直接写vm身上的{{$options}}$options已经出现在vm身上了，不要写成vm.$options了</h1>
<!-- $emit是一个方法，我们需要调用$emit -->
  <h1>vm原型上的东西也可以在Vue模板中直接使用{{$emit}}展示出来的是底层源码</h1>
  <h1>任何东西都可以写，包括带下划线的{{_c}}</h1>

效果展示：

【零基础入门Vue0010】_MVVM架构模型

一、MVVM模型

一、`MVVM`模型