MVC、MVVM和Vue的关系

MVC是后端的编程模式

MVC（Model View Controller)分为三部分:
1.Model（模型）表示应用程序核心。
2.View（视图）显示数据。
3.Controller（控制器）处理输入。

MVC.png

其中的Model层是"M"、View层为“V”，而router.js和Controller合并为“C”。

说明:

1.app.js并没有路由分发的功能，需要调用router.js模块进行路由的分发处理。
2.为了保证职能单一，router.js只负责分发路由，不负责具体业务逻辑的处理。
3.如果涉及到了业务逻辑处理操作，只能调用Controller模块进行业务逻辑处理。
4.在Controller业务逻辑处理层封装了一些具体业务逻辑处理的逻辑代码，但是为了保证职能单一，此模块只负责处理业务，不负责处理数据的CRUD。
5.如果涉及到了数据的CRUD，需要调用Model层。
6.Model层为了职能单一也只能负责操作数据库，进行数据的CRUD。
7.CRUD是指 C:create R:read U:update D:delete

MVVM是前端的编程模式

MVVM(Model-View-ViewModel)分为 M、V和VM三部分:

MVVM.png

说明:

1.MVVM是前端试图层的分层开发思想，主要把每个页面分成了M、V和VM。其中VM是MVVM的思想核心，因为VM是M和V之间的调度者。
2.前端页面中使用MVVM的思想，主要是为了让程序员开发更加方便，因为MVVM提供了数据的双向绑定。

Vue简单的例子

    
    
    
    
    
    


    
    
    

        
{{msg}}
    

    

Vue和MVVM的关联

View层

MVVM中的“V”，负责显示数据。

    
    

        
{{msg}}
    

VM

MVVM中的"VM"，负责调度。

M

MVVM中的"M"，负责保存数据。

//data就是MVVM中的"M"，用来保存每个页面的数据
            data: {    //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再需要手动操作DOM元素。(Vue之类的前端框架不提倡我们手动操作DOM元素)
                                 //手动操作DOM元素浪费内存
                                 //手都操作DOM元素是指给元素赋值ID，然后通过ID选择器去操作。
            }

说明:
使用了Vue框架就可以不需要给元素的标签赋值ID值，不需要使用ID选择器去操作DOM元素，直接交给VM处理即可。