什么是MVC？
MVC思想：Controller负责将Model的数据用View显示出来。
Model:处理数据逻辑的部分，负责在数据库中存储数据。
View:处理数据的显示部分
Controller:是应用程序的交互部分，通常控制器负责从视图中读取数据，控制用户输入，并向模型发送数据。
Controller是MVC中数据和视图的协调者，也就是Controller里面把Model的数据赋值给view来实现，或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器。
通信流程：
（1）View接收用户传入的数据，传送指令到Controller
（2）Controller完成业务逻辑后，要求Model改变状态
（3）Model将新的数据发送到View，用户得到反馈
所有通信都是单向的。
在MVC中，view是可以直接访问model的，从而view里会包含model的信息， 不可避免的还要包含一些业务逻辑。MVC关注的是Model的不变，所以在MVC模型中，Model不依赖于View，但是View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更新View也是比较困难的，至少业务逻辑是无法重用的。
什么是MVVM？MVVM是Model-View-ViewModel的缩写。
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
MVVM是将其中view的状态和行为抽象化，让我们将视图UI和业务逻辑分开，当然这些事viewModel已经帮我们做了，它可以取出model的数据同时帮忙处理view中由于需要展示内容而涉及的业务逻辑。
它采用双向绑定：View的变动自动反映在ViewModel，反之亦然。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
一个MVVM框架和jQuery操作DOM相比有什么区别？
我们先看用jQuery实现的修改两个DOM节点的例子：
<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>
Hello, Bart!
You are 12.
用jQuery修改name和age节点的内容：
var name = 'Homer';
var age = 51;
$('#name').text(name);
$('#age').text(age);
如果我们使用MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：
var person = {
name: 'Bart',
age: 12
};
我们把变量person看作Model，把HTML某些DOM节点看作View，并假定它们之间被关联起来了。
要把显示的name从Bart改为Homer，把显示的age从12改为51，我们并不操作DOM，而是直接修改JavaScript对象：
person.name = 'Homer';
person.age = 51;
执行上面的代码，我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了！
这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！
Vue和jQuery的对比：
jQuery是使用选择器($)选取元素，对其进行赋值、取值、事件绑定等操作，其实和原生的JS的区别只是在于更方便地操作DOM对象，而数据和界面是在一起的，比如获取label标签的内容：$('label').val()。
Vue则是通过Vue对象将数据和view层完全分离开来。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过vue对象实现相互的绑定。
举例说明：
像列表中添加一个元素,vue只需向message里push一条数据即可完成一个添加li标签的操作，而jquery则需要先获取dom节点，并对dom进行添加一个标签的操作。
vue:
<body>
<div id="app">
<ul>
<!--根据数组数据自动渲染页面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add">添加数据</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ["第1条数据","第2条数据"],
i:2
},
methods:{
//向数组添加一条数据即可
add:function(){
this.i++
this.message.push("第"+this.i+"条数据")
}
}
})
</script>
jQuery:
<body>
<div id="app">
<ul id="list">
<li>第1条数据</li>
<li>第2条数据</li>
</ul>
<button id="add">添加数据</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var i=2;
$('#add').click(function() {
i++;
//通过dom操作在最后一个li元素后手动添加一个标签
$("#list").children("li").last().append("<li>第"+i+"条数据</li>")
});
});
</script>