MVVM 是什么?
M 是model數(shù)據(jù)模型
V 是views 試圖模型
VM 是監(jiān)聽module數(shù)據(jù)模型和view數(shù)據(jù)模型的
vue 的使用方法
vue的快捷方式
插值表達(dá)式的合法用法
1.表達(dá)式
2.三元運(yùn)算符
插值表達(dá)式的作用: 處理數(shù)據(jù)模型的, 渲染data數(shù)據(jù)
v-text 指令可以用來(lái)渲染文本,增強(qiáng)html標(biāo)簽功能
v-開頭的都是指令
v-text和差值表達(dá)式的區(qū)別, 差值表達(dá)式寫在innerHTML位置, 二v-text 寫在標(biāo)簽屬性里
所以常用的是差值表達(dá)式
v-html
可以用來(lái)渲染帶標(biāo)簽的文本, 在網(wǎng)站上動(dòng)態(tài)渲染比較危險(xiǎn),容易導(dǎo)致xss攻擊
v-bind
用來(lái)動(dòng)態(tài)綁定屬性, v-bind:屬性名="data里面的屬性"
v-bind 的簡(jiǎn)寫方式
:src="data里面的屬性"
v-bind 想綁定什么屬性就綁定什么屬性
循環(huán)渲染
v-for 可以渲染數(shù)組和對(duì)象
1.渲染數(shù)組
1)在標(biāo)簽的屬性位置寫上v-for = "item in arr",
item 代表數(shù)組中的每一項(xiàng), arr 表示要渲染的數(shù)組
2)v-for="(item,index) in arr"
2.渲染對(duì)象
v-for ="value in obj"
v-for = "(value, key, index) in obj"
v-model 雙向數(shù)據(jù)綁定,就是view 和model數(shù)據(jù)同步綁定.實(shí)時(shí)更新
但是只能用在input select textarea 3個(gè)標(biāo)簽
v-on 用來(lái)監(jiān)聽dom 事件
使用方法: 1.在標(biāo)簽的屬性位置, 寫上v-on:任意的事件類型="執(zhí)行的函數(shù)"
在methods對(duì)象里面定義函數(shù), 注意在methods里面獲取data 中的屬性, 要加上this,
2.@任意事件類型="執(zhí)行的函數(shù)"
3.通過(guò)執(zhí)行函數(shù)添加參數(shù)
4.通過(guò)執(zhí)行函數(shù)添加event參數(shù)傳遞事件對(duì)象, 只能是event,不能帶引號(hào)
5.事件修飾符可以給時(shí)間添加特殊功能 .prevent(代表組織默認(rèn)行為) .stop
6.可以給鍵盤的按鍵相關(guān)事件添加按鍵修飾符, 例如enter,輸入框
v-if 控制元素的顯示和隱藏
v-if = "布爾值", true代表元素顯示, false 隱藏
v-show 控制元素的顯示和隱藏
v-show = "布爾值", true代表元素顯示, false 隱藏
兩者區(qū)別
v-if 通過(guò)控制dom來(lái)控制元素的顯示和隱藏,涉及到一異步數(shù)據(jù)渲染的時(shí)候
v-show 通過(guò)樣式display來(lái)控制元素的顯示和隱藏, 大量操作dom的時(shí)候,
