肥西縣市建設局網(wǎng)站廣州seo公司如何
指令
v-show:展示和隱藏 ?如圖片的展示和隱藏 ?(底層是其實已經(jīng)創(chuàng)建了 加了個css屬性,display = none)
v-if:創(chuàng)建和刪除 ?創(chuàng)建和刪除,刪除就真的沒了
v-for: 遍歷指令 ? v-for="item in list" 或 = "(item,index) in list" 還可以顯示索引 如for循環(huán)中需要刪除某行,就需要Index進行傳參,in和of完全一樣,如果遍歷對象,結(jié)構(gòu)是(value,key) in Object
還可以,遍歷常量,item in 10 輸出結(jié)果為 1/2/3....10
v-bind:動態(tài)綁定一個指令 ,如 v-bind:isShow ? 可以直接省略為 ? :isShow ? b-bind可以用:替代
v-on:綁定事件:如v-on:click:方法名() ? ? ? ? ?可以簡寫為@:click ? ? 可以將v-on替換為@
v-model:雙向綁定表單 ? ?只要屬性值改變,輸入框的值也會改變,相反一樣
v-html:解析文本,{{}}中默認解析為普通文本,就是普通的字符串,防止第三方傳來的數(shù)據(jù)有問題,使用v-html進行解析,如<b>加粗的</b> 需要注意XSS攻擊問題
==:比較的是兩邊變量的值
===:比較的是兩邊的類型和值
template:包裝元素,不會破壞項目結(jié)構(gòu),不像div會在外面套一層
key:跟蹤每個節(jié)點的身份,重用和排序現(xiàn)有元素,理想Key是每項都有的且唯一的id
事件
@click:點擊事件
@click.self:點自己本身才會觸發(fā),點內(nèi)部事件不會觸發(fā)? ??
@click.stop:阻止事件向外傳播
@click.once:只可以執(zhí)行一次
@click.prevent:阻止默認行為
@input:輸入框事件,失去焦點等
調(diào)用方法時不傳參數(shù),可以通過傳入系統(tǒng)參數(shù)evt.target 可以獲取事件源,如evt.target.valu0e
@keyup:按鍵相關(guān),抬起觸發(fā)
@keyup.enter:抬起回車觸發(fā)
屬性
href:超鏈接,跳轉(zhuǎn)
常用方法
includes("a"):arr.filter(item => item.includes("aa"))? 包含a的~
數(shù)組更新檢測
- 使用以下方法操作數(shù)組,可以檢測變動,這類方法可以vue調(diào)用完會自動刷新頁面數(shù)據(jù)
? ? ? ? ????????push() pop() shift() unshift() splice() sort() reverse()? ? ? ??
- 這類方法需要使用新數(shù)組替換原數(shù)組來使頁面刷新
????????????????filter(),concat()和slice() ,map() 對于原數(shù)組沒有任何影響,頁面不會變動
- ?list[0] = 1 ,此時數(shù)組確實被修改了,但是頁面數(shù)據(jù)沒有被刷新
- Vue2中使用Vue.set(datalist,1,"aa"),將datalist數(shù)組中的1替換為aa,頁面同步展示,或者使用datalist.splice(0,1,"aa")
模糊查詢
v-model = datalist? v-for="item in test()"
test(){
return datalist.filter(item => item.includes("aa"))
}