006_重学Vue_MVVM

一、MVVM概念

MVVM（Model–view–viewmodel）是一种软件架构模式。MVVM有助于将界面与逻辑分离开来。

MVVM模式的组成部分

• 模型

  模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

• 视图

  视图是用户在屏幕上看到的结构、布局和外观（UI）。

• 视图模型

  视图模型是暴露公共属性和命令的视图的抽象。MVVM有一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

二、Vue中的MVVM

• M：模型（Model）：data中的数据
• V：视图（View）：模板代码
• VM：视图模型（ViewModel）：Vue实例

1. vm将data中的健值对通过数据绑定到视图上；
2. vm通过DOM Listeners将DOM（视图）变化后的值反应到data中；
3. data中的数据最后都出现在vm身上；
4. vm实例的属性及vue原型上的所有属性都可以在模板中使用。