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简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入Vue的包 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 将来new的Vue实例会控制这个元素中的所有内容 -->
    <!-- Vue实例所控制的元素区域，就是MVVM中的"V" -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        //创建一个Vue的实例
        //当我们导入包后，在浏览器的内存中就多了一个Vue构造函数
        //我们new出来的vm对象，就是MVVM中的"VM"
        var vm = new Vue({
            el: '#app',//表示当前我们new的这个Vue实例要控制的区域  el是element的缩写
            //data就是MVVM中的"M"，用来保存每个页面的数据
            data: {    //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再需要手动操作DOM元素。(Vue之类的前端框架不提倡我们手动操作DOM元素)
                                 //手动操作DOM元素浪费内存
                                 //手都操作DOM元素是指给元素赋值ID，然后通过ID选择器去操作。
            }
        })
    </script>
</body>
</html>

Vue和MVVM的关联

View层

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

<!-- 将来new的Vue实例会控制这个元素中的所有内容 -->
    <!-- Vue实例所控制的元素区域，就是MVVM中的"V" -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

VM

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

<script>
        //创建一个Vue的实例
        //当我们导入包后，在浏览器的内存中就多了一个Vue构造函数
        //我们new出来的vm对象，就是MVVM中的"VM"
        var vm = new Vue({
            el: '#app',//表示当前我们new的这个Vue实例要控制的区域  el是element的缩写
            //data就是MVVM中的"M"，用来保存每个页面的数据
            data: {    //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再需要手动操作DOM元素。(Vue之类的前端框架不提倡我们手动操作DOM元素)
                                 //手动操作DOM元素浪费内存
                                 //手都操作DOM元素是指给元素赋值ID，然后通过ID选择器去操作。
            }
        })
    </script>

M

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

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

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