您好,登錄后才能下訂單哦!
這篇“Vue監(jiān)聽(tīng)的方法有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“Vue監(jiān)聽(tīng)的方法有哪些”文章吧。
Vue 是漸進(jìn)式框架,自底向上增量開(kāi)發(fā),是構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面,他通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,與angularjs,相比它小巧,運(yùn)行快數(shù)據(jù)綁定都使用{{}} ,與react相比都提供了 組件化的試圖組件,都集中在核心庫(kù),有豐富的插件庫(kù)。
1. 常用標(biāo)簽
V-model 雙向關(guān)聯(lián)
V-else 與 v-else在上下相近的標(biāo)簽里使用,分開(kāi)就會(huì)影響條件的判斷
V-for (a , b)in c 遍歷c ,參數(shù)a 代表各個(gè)對(duì)象,b代表索引
V- text 想內(nèi)部注入文本,標(biāo)簽內(nèi)部不再寫(xiě)內(nèi)容
V-html 內(nèi)部可以注入標(biāo)簽,但也是黑客突破網(wǎng)絡(luò)的窗口
V-bind 可以動(dòng)態(tài)的綁定內(nèi)容 例如v-bind:src= url在下方模塊的data部分寫(xiě)路徑
如果直接寫(xiě)入路徑會(huì)報(bào)錯(cuò)
動(dòng)態(tài)的綁定 component 中 :is=“name”
2、監(jiān)聽(tīng)
第一種寫(xiě)法
vm.$watch (‘’,function( newvalue , oldvalue){ } )
在vm=new vue外部寫(xiě)的 $watch 是因?yàn)樵谕獠空{(diào)用 ,升成全局 同理 $el
第二種寫(xiě)法
直接在vue初始化中通過(guò)
vue內(nèi)部寫(xiě)的
watch{msg:function(newvalue,oldvalue){}
3、過(guò)濾器
?。╲ue 1.0 有內(nèi)置過(guò)濾器 vue2.0 自定義過(guò)濾器)
filter 是過(guò)濾器語(yǔ)法, 寫(xiě)在 vue前
Vue.filter(‘過(guò)濾器名字’,function(value){
if(value ){
return //具體操作
}
if(value){
return //具體操作
}
})
調(diào)用
{{ 值 | 過(guò)濾器名字 }}
4、事件阻止冒泡
1)函數(shù)內(nèi)部阻止事件冒泡 e.cancelBubble=true; // 在 vue 的methods 內(nèi)聲明事件是添加原話(huà)
2)標(biāo)簽內(nèi)阻止事件冒泡 @click.stop=“show1()” //添加一個(gè)stop 即可,其他正常寫(xiě)
3)鍵盤(pán)事件 keydown 函數(shù)中獲取鍵盤(pán)編碼keyCode
4)在標(biāo)簽內(nèi)直接綁定按鍵事件 (英文名或鍵盤(pán)碼)
@keyup.13=“functionname()” @keyup.enter=“functionname()”
5、生命周期 共11個(gè)
通俗理解是一個(gè)組件之類(lèi)的加載失效的過(guò)程,類(lèi)比于生命的開(kāi)始與結(jié)束,這些特殊的時(shí)間節(jié)點(diǎn)被當(dāng)做事件的觸發(fā)條件,省去了綁定事件發(fā)生的代碼量。
箭頭函數(shù)this指向父級(jí) 不是實(shí)例,所以不能綁定生命周期
常用的幾種
beforeMount在掛載開(kāi)始之前被調(diào)用
Mounted el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用
6、傳值
1)父?jìng)髯?/p>
?。ㄍㄟ^(guò)在子組件標(biāo)簽上綁定自定義屬性式的指令,值為傳遞的數(shù)據(jù),
子組件內(nèi)部通過(guò)props屬性名接收(數(shù)組形式 加引號(hào)【“ name”】),子組件的模板內(nèi),
直接解析加載接收的屬性名。)
調(diào)用
2)子傳父
?。ㄍㄟ^(guò)在 子組件標(biāo)簽上綁定自定義事件,子組件內(nèi)部通過(guò)$emit進(jìn)行數(shù)據(jù)推送
父組件通過(guò)事件調(diào)用函數(shù)參數(shù)進(jìn)行數(shù)據(jù)接收)
子組件script中
父組件body中
父組件的方法中將收到的數(shù)據(jù)賦予data
3)平行組件傳值(非父子組件 之間 傳值—空vue對(duì)象$emit(‘’,數(shù)據(jù)) 發(fā)送 $on 接收)
可看做將$emit升為全局
以上就是關(guān)于“Vue監(jiān)聽(tīng)的方法有哪些”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。