- MVC是后端的分层开发概念
- MVVM是前端视图层的概念，主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model,View,VM ViewModel
- 为什么有了MVC还要有MVVM
1.后端的MVC
MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M、V和VM。其中，VM是MVVM思想的核心；因为VM是M和V之间的调度者。
前端页面中使用MVVM的思想,主要是为了让我们开发更加方便,因为MVVM提供了数据的双向绑定。
2.前端代码演示MVVM
<!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> <!-- 1.导入vue --> <script src="../vuejs/vue.js"></script> </head> <body> <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --> <div id="app"> <p>{{msg}} </p> </div> <script> //2.创建一个Vue的实例 //到我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数 var vm = new Vue({ el:'#app', //表示当前我们new的这个vue实例，要控制页面上的那个区域 data:{ //data属性中，存放的是el中要用到的数据 msg: '欢迎学习vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了[前端的Vue之类的框架,不提倡我们去手动操作DOM元素了] } }) </script> </body> </html>
M (Model)
data就是MVVM中的M，专门用来保存 每个页面的数据
data:{
msg: '欢迎学习vue'
}
V (View)
Vue 实例所控制的这个元素区域,就是我们的V
<div id="app"> <p>{{msg}} </p> </div>
VM (ViewMode)
注意：我们 new 出来的这个vm对象，就是我们MVVM中的VM调度者.
var vm = new Vue({
el:'#app',
data:{
msg: '欢迎学习vue'
}
})