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处理即可。
网友评论