MVC模式 和 MVVM模式

MVC模式

模型 - 视图 - 控制器或MVC，MVC是普遍的叫法，是一种软件设计模式，用于开发Web应用程序。模型- 视图 - 控制器模式是由以下三部分组成：

• 模型/Model - 一个负责维护数据模式的最低水平。

• 视图/View - 负责显示所有或数据到用户的部分。

• 控制器/Controller - 软件代码控制Model和View之间的相互作用。

MVC是受欢迎的，因为它隔离了应用逻辑从用户界面层和支持的关注点分离。这里的控制器接收用于该应用程序的所有请求，制备视图所需要的任何数据。视图，使用制备的控制器，产生一个最终像样的响应的数据。 MVC抽象可以用图形表示如下。

模型 - model

模型是负责管理应用程序的数据。它响应来自视图的请求，同时也响应指令从控制器进行自我更新。

视图 - view

在一个特定的格式的演示数据，由控制器决定触发显示数据。它们是基于脚本的模板系统，如JSP，ASP，PHP，非常容易使用AJAX技术的集成。

控制器 - controller

控制器负责响应于用户输入并执行交互数据模型对象。控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作

MVVM模式

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。 

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。 
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据； 
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

Hello World示例