图说VUE的MVVM

图说VUE的MVVM


Vue是MVVM架构，响应式，轻量级框架。


主要特点：1、轻量级2、双向数据绑定3、指令4、组件化5、客户端路由6、状态管理

MVVM架构是指：

数据层（Model）：应用数据以及逻辑，主要指从后端获取的数据

视图层（View）：页面UI组件，主要由 HTML 和 CSS 来构建

视图数据模型（ViewModel）：数据与视图关联起来，数据和 DOM 已经建立了关联，是响应式的，使编程人员脱离复杂的界面操作

ViewModel主要功能是实现数据双向绑定：

数据变化后更新视图，既：model有数据更新时UI组件会响应变化视图变化后更新数据，界面上如果有input输入框，输入数据时，model中的数据也会更新

与jQuery比较会更清晰：


jQuery想要修改界面中某个标签，需要以下几步：

搜索web页面DOM树
根据选择器选择到DOM
将数据更新到节点

以上步骤在操作更新节点时都需要进行一遍流程