MVC > MVP MVVM
MVC定義:是軟件設計的一種典范或者是根據(jù)代碼功能不同進行劃分的規(guī)則
MVC
Model-View-Controller
Model層負責數(shù)據(jù)存儲
View負責數(shù)據(jù)展示和用戶交互
Controller層負責業(yè)務邏輯
MVP
Model層負責數(shù)據(jù)存儲
View層負責數(shù)據(jù)展示和用戶交互
Presenter層 作為Model層和View層數(shù)據(jù)的中轉站
MVVM
Model-View-(View-Model)
Model層負責數(shù)據(jù)的存儲
View層負責數(shù)據(jù)的展示和用戶交互
View-Model層負責實現(xiàn)數(shù)據(jù)的雙向綁定
關系圖1
關系圖2
雙向綁定原理
元素→數(shù)據(jù) 數(shù)據(jù)→元素
數(shù)據(jù)→元素:
使用Object.defineProperty()
利用getter 和 setter 進行綁定
注意私有屬性的使用(防止遞歸進入死循環(huán))
Vue常見的指令說明
| 指令名稱 | 說明 | 實例 |
|---|---|---|
| 插值表達式 | 可以直接將值展示到頁面上,里面可以放數(shù)據(jù)名稱,也可以放簡單的表達式 | {{msg}} {{1+1}} |
| 雙向綁定指令 | v-model,可以實現(xiàn)數(shù)據(jù)的雙向綁定,一般用在表單元素內 | <input type="text" v-model="msg"> |
| 屬性綁定指令 | v-bind : 當需要給元素中的屬性綁定數(shù)據(jù)的時候,需要用到屬性綁定指令 | <img v-bind:src=\"url\"> |
| 條件指令 | v-if這個指令可以根據(jù)所綁定的數(shù)據(jù)是否為true,來決定是否要顯示元素,如果是false,vue會直接將元素從頁面中移除,里面的指令也不會再解析 | <div v-if="flag">看不見我</div> |
| 條件指令 | v-show 這個指令可以根據(jù)所綁定的數(shù)據(jù)是否為true，來決定是否要顯示元素被啼，如果是false，vue會給元素設置display:none，里面的指令會照常解析 | <div v-show="flag">看不見我</div> |
| 事件注冊指令 | v-on:這個指令可以用來注冊事件v-on:事件類型.事件修飾符="事件函數(shù)名稱或者表達式"
|
<button v-on:click.stop="btnClick">按鈕</button> |
| 事件注冊指令 | @這個指令時v-on:的縮寫@事件類型.事件修飾符="事件函數(shù)名稱或者表達式"
|
<button @click.stop="btnClick">按鈕</button> |
| 列表渲染指令 | v-for可以用來遍歷數(shù)組,對象,字符串,數(shù)字 | <li v-for="(item, index) in 數(shù)組、對象段直、字符串、數(shù)字" :key="index">{{item}}</li> |
事件修飾符
.stop (阻止事件冒泡)
.prevent(阻止事件默認行為)
.capture(事件捕獲)
.self()
.once(只執(zhí)行一次)
