MVC模式概要
1.即Model、View、Controller即模型、視圖、控制器。
-View：它是提供給用戶的操作界面，是程序的外殼；
Model：是程序需要操作的數據和信息；
Controller：接收View層傳遞過來的指令，選取Model層對應的數據，進行相應操作。
2.舉一個現實中的類似的例子，MVC如同一家商鋪的運作模式，View層相當於是這家商鋪的店面，Model層相當於這家商鋪的倉庫，Controller層相當於是這家商鋪的執行部門。
3.MVC有如下兩種模式，不管哪種模式，MVC的通信都是單向的，由圖也可以看出，View層會從Model層拿數據，因此MVC中的View層和Model層還是存在耦合的。
MVP模式概要
1.MVP是從MVC進化而來，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是將MVC中的Controller變成了Presenter；
2.由上面對MVC的介紹中我們可以得知，MVC中的View層和Model層是存在耦合的，但其實我們不提倡View層與Model層有直接的交互；MVP就是這樣一種思想的體現，View層與Model的交互只能通過Presenter；
3.MVP與MVC還有一點不同是，它的通信是雙向的，如下圖所示，有兩個方向：V—>P—>M，M—>P—>V
MVVM模式概要
1.MVVM是由MVP進化而來，MVVM模式基本上與MVP相同，只是把MVP中的P變成了VM，即ViewModel，
2.MVVM中的數據可以實現雙向綁定，即View層數據變化則ViewModel中的數據也隨之變化，反之ViewModel中的數據變化，則View層數據也隨之變化
3.這裏以前端框架VUE舉例說明MVVM，當然還有許多有名的框架都用的是MVVM模式；MVVM的好處就是數據驅動，數據變，則頁面變，這樣就能用簡單的代碼，實現比較複雜的邏輯操作；因此MVVM框架比較適合邏輯複雜的前端項目，比如一些管理系統等。
1）準備視圖層
<p>Hello, {{ name }}!</p> --View層 --VUE中的單向綁定
<input v-model="name"> --View層 --VUE中的雙向綁定
2）準備數據層
data: {
name: '' --Model層
}
3）至於VM層，VUE框架已封裝好，預知詳情可閱讀廖雪峯的博客；
4）得益於MVVM框架，我們此時想改變視圖層的
標籤和標籤中的name屬性的值，只需要通過如下方式即可，這樣頁面中就會顯示“Jack”的名字，如果不是MVVM框架，我們則需要通過document.getElementById('name').``innerHTML = 'jack'，這種操作dom節點的方式來改變頁面的值。
this.name = 'jack'