MVC是后端的編程模式
MVC（Model View Controller)分為三部分:
1.Model（模型）表示應(yīng)用程序核心恨豁。
2.View（視圖）顯示數(shù)據(jù)奠骄。
3.Controller（控制器）處理輸入。
其中的Model層是"M"剩瓶、View層為“V”驹溃，而router.js和Controller合并為“C”城丧。
說明:
1.app.js并沒有路由分發(fā)的功能，需要調(diào)用router.js模塊進(jìn)行路由的分發(fā)處理豌鹤。
2.為了保證職能單一亡哄，router.js只負(fù)責(zé)分發(fā)路由，不負(fù)責(zé)具體業(yè)務(wù)邏輯的處理布疙。
3.如果涉及到了業(yè)務(wù)邏輯處理操作蚊惯，只能調(diào)用Controller模塊進(jìn)行業(yè)務(wù)邏輯處理。
4.在Controller業(yè)務(wù)邏輯處理層封裝了一些具體業(yè)務(wù)邏輯處理的邏輯代碼灵临，但是為了保證職能單一截型，此模塊只負(fù)責(zé)處理業(yè)務(wù)，不負(fù)責(zé)處理數(shù)據(jù)的CRUD儒溉。
5.如果涉及到了數(shù)據(jù)的CRUD宦焦，需要調(diào)用Model層。
6.Model層為了職能單一也只能負(fù)責(zé)操作數(shù)據(jù)庫顿涣，進(jìn)行數(shù)據(jù)的CRUD赶诊。
7.CRUD是指 C:create R:read U:update D:delete
MVVM是前端的編程模式
MVVM(Model-View-ViewModel)分為 M、V和VM三部分:
說明:
1.MVVM是前端試圖層的分層開發(fā)思想园骆，主要把每個(gè)頁面分成了M舔痪、V和VM。其中VM是MVVM的思想核心锌唾，因?yàn)閂M是M和V之間的調(diào)度者锄码。
2.前端頁面中使用MVVM的思想，主要是為了讓程序員開發(fā)更加方便晌涕，因?yàn)镸VVM提供了數(shù)據(jù)的雙向綁定滋捶。
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>
<!-- 導(dǎo)入Vue的包 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 將來new的Vue實(shí)例會控制這個(gè)元素中的所有內(nèi)容 -->
<!-- Vue實(shí)例所控制的元素區(qū)域，就是MVVM中的"V" -->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
//創(chuàng)建一個(gè)Vue的實(shí)例
//當(dāng)我們導(dǎo)入包后余黎，在瀏覽器的內(nèi)存中就多了一個(gè)Vue構(gòu)造函數(shù)
//我們new出來的vm對象重窟，就是MVVM中的"VM"
var vm = new Vue({
el: '#app',//表示當(dāng)前我們new的這個(gè)Vue實(shí)例要控制的區(qū)域 el是element的縮寫
//data就是MVVM中的"M"，用來保存每個(gè)頁面的數(shù)據(jù)
data: { //data屬性中惧财，存放的是el中要用到的數(shù)據(jù)
msg:'歡迎學(xué)習(xí)Vue' //通過Vue提供的指令巡扇，很方便的就能把數(shù)據(jù)渲染到頁面上，程序員不再需要手動(dòng)操作DOM元素垮衷。(Vue之類的前端框架不提倡我們手動(dòng)操作DOM元素)
//手動(dòng)操作DOM元素浪費(fèi)內(nèi)存
//手都操作DOM元素是指給元素賦值ID厅翔，然后通過ID選擇器去操作。
}
})
</script>
</body>
</html>
Vue和MVVM的關(guān)聯(lián)
View層
MVVM中的“V”搀突，負(fù)責(zé)顯示數(shù)據(jù)刀闷。
<!-- 將來new的Vue實(shí)例會控制這個(gè)元素中的所有內(nèi)容 -->
<!-- Vue實(shí)例所控制的元素區(qū)域，就是MVVM中的"V" -->
<div id="app">
<p>{{msg}}</p>
</div>
VM
MVVM中的"VM"，負(fù)責(zé)調(diào)度甸昏。
<script>
//創(chuàng)建一個(gè)Vue的實(shí)例
//當(dāng)我們導(dǎo)入包后顽分，在瀏覽器的內(nèi)存中就多了一個(gè)Vue構(gòu)造函數(shù)
//我們new出來的vm對象，就是MVVM中的"VM"
var vm = new Vue({
el: '#app',//表示當(dāng)前我們new的這個(gè)Vue實(shí)例要控制的區(qū)域 el是element的縮寫
//data就是MVVM中的"M"施蜜，用來保存每個(gè)頁面的數(shù)據(jù)
data: { //data屬性中卒蘸，存放的是el中要用到的數(shù)據(jù)
msg:'歡迎學(xué)習(xí)Vue' //通過Vue提供的指令，很方便的就能把數(shù)據(jù)渲染到頁面上花墩，程序員不再需要手動(dòng)操作DOM元素悬秉。(Vue之類的前端框架不提倡我們手動(dòng)操作DOM元素)
//手動(dòng)操作DOM元素浪費(fèi)內(nèi)存
//手都操作DOM元素是指給元素賦值ID澄步，然后通過ID選擇器去操作冰蘑。
}
})
</script>
M
MVVM中的"M"，負(fù)責(zé)保存數(shù)據(jù)村缸。
//data就是MVVM中的"M"祠肥，用來保存每個(gè)頁面的數(shù)據(jù)
data: { //data屬性中，存放的是el中要用到的數(shù)據(jù)
msg:'歡迎學(xué)習(xí)Vue' //通過Vue提供的指令梯皿，很方便的就能把數(shù)據(jù)渲染到頁面上仇箱，程序員不再需要手動(dòng)操作DOM元素。(Vue之類的前端框架不提倡我們手動(dòng)操作DOM元素)
//手動(dòng)操作DOM元素浪費(fèi)內(nèi)存
//手都操作DOM元素是指給元素賦值ID东羹，然后通過ID選擇器去操作剂桥。
}
說明:
使用了Vue框架就可以不需要給元素的標(biāo)簽賦值ID值，不需要使用ID選擇器去操作DOM元素属提，直接交給VM處理即可权逗。
