前言
学过一遍知识之后发现好多东西都是边学边忘,比如像考试的时候总记得这道题老师讲过但完全忘了怎么做吧…所以,最近又开始看一些教学视频,对学过的知识进行总结。
一、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模板中都可以直接使用