MVC MVP MVVM MVW MV*
MVC
Model View Controller
Model: 負責提供數(shù)據
View: 負責數(shù)據展示與交互
Controller: 負責接收到View中用戶交互的結果之后,經過特定的處理之后轉交給ModelMVP
Model View Presenter
Model: 負責提供數(shù)據
View: 負責數(shù)據展示與交互
Presenter: 負責View和Model之間的數(shù)據傳輸 (橋梁) 這里的代碼都是自己實現(xiàn)的MVVM
Model View Presenter
Model: 負責提供數(shù)據
View: 負責數(shù)據展示與交互
View-Model: 負責View和Model之間的數(shù)據傳輸 (橋梁) 這里的代碼都是框架實現(xiàn)的脚草!
MVW: Model View Whatever
MV*
Vue的基本使用
安裝vue
1.1 下載vue.js文件
1.2 通過cdn引用
1.3 npm直接安裝vue包-
使用
2.1 引入vue.js文件
2.2 為vm對象創(chuàng)建視圖部分 html
2.3 創(chuàng)建Vue實例var vm = new Vue()
2.4 在創(chuàng)建Vue實例的時候须眷,需要通過el將vm對象和視圖關聯(lián)起來
2.5 可以在視圖中書寫指令 引用vm對象中的數(shù)據(data)注意: 在視圖中使用的數(shù)據劲绪,必須現(xiàn)在data中聲明好跨释,如果data中沒有雕旨,卻在視圖中引用悯姊,會報錯棉浸!
Vue的指令
- 插值表達式: {{數(shù)據名}}
- 雙向數(shù)據綁定的指令: v-model
- 屬性綁定的指令: v-bind:屬性名="表達式池颈、數(shù)據名" 簡寫 :屬性名="表達式、數(shù)據名"
- 事件綁定: v-on:事件類型="函數(shù)名蔓同、表達式" 如果是函數(shù)名饶辙,則去methods中找對應的函數(shù) 簡寫 @事件類型="函數(shù)名、表達式"
- v-text v-html: 可以給元素設置內容斑粱,v-text會修改innerText v-html就相當于是innerHTML弃揽, v-text不支持渲染html代碼,而v-html支持
- v-cloak: 這個可以和css樣式配合则北,解決閃爍問題
- v-for: 可以用來遍歷數(shù)組矿微、對象、字符串尚揣、數(shù)字涌矢,生成對應的元素
<div v-for="item in items"> <div v-for="(item, index) in items"> <div v-for="(item, key,index) in items"> <div v-for="item in 10">
- v-if v-show 都可以用來控制元素的顯示和隱藏,但是原理不一樣快骗, v-show只是簡單的通過css樣式display來控制顯示和隱藏娜庇,而v-if會直接控制元素存在與否,如果條件是false方篮,v-show會加上display:none名秀, 而v-if會直接將元素從頁面中移除, v-if在頻繁的切換下會比較耗性能
事件修飾符
@click.修飾符.修飾符="表達式"
.stop 阻止冒泡
.prevent 阻止默認行為
.self 只有自己能觸發(fā)
.once 只觸發(fā)一次
.capture 在捕獲階段觸發(fā)