复习笔记（一）理解MVVM

前言

学过一遍知识之后发现好多东西都是边学边忘，比如像考试的时候总记得这道题老师讲过但完全忘了怎么做吧…所以，最近又开始看一些教学视频，对学过的知识进行总结。

一、MVVM模型是什么？

1.M：模型（Model）：对应data中的数据
2.V：视图（View）：模板
3.VM：视图模型（ViewModel）：Vue实例对象

对应图中：
Plain JavaScript Objects:一般js对象

View------>DOM----->页面----->模板 （页面从何而来？ 模板经过解析形成了页面，从而生成DOM结构，从某种程度上说，模板也是页面结构）

ViewModel：整个绿色的大盒子就是Vue所缔造的一个实例对象
Data Bindings：数据绑定 （数据存在Model中，经过Vue实例进行数据绑定，就把数据摆在了我想要的页面位置）
DOM Listeners：数据监听（例如：页面中有一个输入框，在输入框中输入123，随后这个123就跑到数据里了，页面上的改变能映射回数据里的改变，是对DOM的监听）

二、根据代码加深理解

1.代码

ViewModel把一堆数据和DOM结构在中间做了一个连接，它是中间的一个桥梁

2.Vue实例vm

在Vue官方文档中这样写到：

在上述代码中的vm如图所示：

那么在 {{ }} 中可以写什么值呢？
答：出现在vm上的都可以用，甚至是Vue原型上的

总结

观察发现：
1.data中所有的属性，最后都出现在了vm身上（数据代理，先不提）
2.vm身上所有的属性以及 Vue原型上所有属性，在Vue模板中都可以直接使用