什么是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>