一：目的

借鉴后端思想，职责划分、分层（将Model层、View层进行分类）

二：分类

1：MVC=>传统模式Backbone + underscore + jquery，用户操作会请求服务端路由，路由会调用对应的控制器获取数据。将结果返回进行页面重新渲染

2：MVVM=>Model-View-ViewModel缩写，Controller演变成ViewModel,

会自动将数据渲染到页面中，视图变化会通知 viewModel层 更新数据。ViewModel 就是桥梁

Model层=>代表数据模型,定义数据修改和操作的业务逻辑。仅仅关注数据本身

View=>代表UI组件,用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel=> 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作

三：总结

MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。利用双向绑定技术， Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化

四：图解

1：mvc模式

2：mvvm模式

五：代码实现

<div id="app">
  <p>{{message}}</p>
  <button v-on:click="showMessage()">Click me</button>
</div>
var app = new Vue({
  el: '#app',
  data: {  // 用于描述视图状态  
    message: 'Hello Vue!', // Model 层
  },
  // ViewModel 层：通过事件修改model层数据
  methods: {  // 用于描述视图行为  
    showMessage(){
      let vm = this;
      alert(vm.message);
    }
  },
  created(){
    let vm = this;
    // Ajax 获取 Model 层的数据
    ajax({
      url: '/your/server/data/api',
      success(res){
        vm.message = res;
      }
    });
  }
})