前端框架MVVM（整理）

一、总结
vm层（视图模型层）viewmodel 通过接口从后台m(model)层请求数据，vm层继而和v(view)层实现数据的双向绑定。
二、MVVM和MVC的关系
1.mvc中c(controller)层被转换成vm（viewmodel）层
2.MVVM是model(接口）-view(视图）-viewmodel(视图模型层）的简写，就是mvc的改进版
3.MVVM更好的实现了前后台分离
三、MVVM框架编码实例
Vue的View模板：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue的ViewModel层：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

服务端的Model层（省略业务逻辑处理，只描述对外接口）

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

这就是完整的MVVM编程模式。
四、前端框架MVVM出现的最大意义是什么？
1.开发效率
MVVM的出现促进了GUI（图形用户界面）前端开发与后端业务逻辑的分离，极大地提高了前端开发的效率。
2.前后端 业务逻辑 分离
MVVM用接口实现了前后端数据的通信，这样可以使前后端之间业务逻辑没有什么关系。
3.接口
MVVM在感觉上要比MVC模式前后端要分的更开。
五、应用MVVM框架的vue.js框架的最主要作用是什么？
1、双向数据绑定
双向数据绑定：绑定后vue和dom数据保持一致，一动全动，是前端的。
双向数据绑定中的两向分别为view和viewmodel
2.前端数据的统一
前端应用相同数据的位置实现数据的统一
六、前端框架MVVM中的vm层是干嘛的？
1.状态 行为
viewmodel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的model数据进行转换处理，做二次封装，以生成符合view层使用预期的视图数据模型。
需要注意的是viewmodel所封装出来的数据模型包含视图的状态和行为两部分，而model层的数据模型只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在viewmodel里，这样的封装使得viewmodel可以完整地去描述view层，由于实现了双向绑定，viewmodel的内容会实时展现在view层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM 去更新视图，MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护viewmodel，更新数据视图会自动得到相应更新，真正实现数据驱动开发。view层展现的不是Model层的数据，而是viewmodel的数据，由viewmodel负责与model层交互，这就完全解耦了view层和model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
2.DOM操作
view一般就是我们平常说的HTML文本的js模板，里面可以嵌入一些js模板的代码，比如jstl类似的模板伪代码
viewmodel层里面就是我们对于这个视图区域的一切js可视业务逻辑，比如：图片走马灯特效，表单按钮点击提交，这些自定义事件的注册和处理处理都要写在viewmodel里面了
model就更简单了，就是对于纯数据的处理，比如增删除查，与后台CGI（公共网关接口）做交互
七、MVVM最主要的特征是什么？
前后端分离
前后端分手大师—MVVM模式
或者说前后端更好的分离（接口来实现前后端的通信）