Vue.js前端開發(fā)框架應用（微課版） 課件 第四章 Vue.js事件處理

Vue.js框架應用Vue.js事件處理目

錄Vue.js事件處理器修飾符watch偵聽目

錄Vue.js事件處理器修飾符watch偵聽Vue.js事件處理器

一、監(jiān)聽事件Vue.js提供的v-on指令用來監(jiān)聽DOM事件，并在事件觸發(fā)時執(zhí)行對應的代碼。它的用法如下：v-on:click="methodName"@click="handler"v-on指令的參數(shù)值click：事件觸發(fā)類型“鼠標點擊”等于號后面的值：事件處理器，它分為兩類：內(nèi)聯(lián)事件處理器和方法事件處理器三、內(nèi)聯(lián)事件處理器v-on指令接收的是事件被觸發(fā)時執(zhí)行的內(nèi)聯(lián)JavaScript語句（與onclick類似）。二、方法事件處理器v-on指令可以接受一個方法名對某個方法的調(diào)用，稱為方法事件處理器。方法事件處理器會自動接收原生DOM事件并觸發(fā)執(zhí)行。目

錄Vue.js事件處理器修飾符watch偵聽修飾符

一、事件修飾符我們在處理事件時經(jīng)常會調(diào)用event.preventDefault()或event.stopPropagation()方法，為了使方法能更專注于數(shù)據(jù)邏輯而不用去處理DOM事件的細節(jié)，Vue.js為我們提供了v-on指令的修飾符。主要包含：.stop：阻止事件傳播.prevent：阻止事件默認行為.self：僅元素自身觸發(fā).capture：默認的冒泡事件更改為捕獲事件.once：事件最多被觸發(fā)一次注意：當同時使用了多個事件修飾符時，要注意修飾符的調(diào)用順序。例如：@click.prevent.self會阻止元素及其子元素的所有點擊事件的默認行為，而@click.self.prevent只會阻止對元素本身的點擊事件的默認行為。修飾符

二、按鍵修飾符有些事件是通過按鍵觸發(fā)，因此我們在監(jiān)聽鍵盤事件時需要經(jīng)常檢查特定的按鍵。Vue.js允許在v-on或@監(jiān)聽按鍵事件時添加按鍵修飾符。1.普通按鍵修飾符2.系統(tǒng)按鍵修飾符3..exact按鍵修飾符三、鼠標按鍵修飾符除了上面的修飾符，Vue.js還提供了.left、.right、.middle鼠標按鍵修飾符，它們將處理程序限定為由特定鼠標按鍵觸發(fā)的事件。<!--只有當按下鼠標右鍵時才會觸發(fā)--><button@click.right="btnClick">A</button>目

錄Vue.js事件處理器修飾符watch偵聽watch偵聽一、偵聽器在某些情況下，我們需要在一個數(shù)據(jù)狀態(tài)變化時去執(zhí)行一些操作，這樣就需要實時地在代碼邏輯中偵聽這個數(shù)據(jù)。Vue.js提供了實例的watch偵聽器選項，通過它可以實現(xiàn)這一功能。通過設置偵聽，在每次響應式屬性發(fā)生變化時會觸發(fā)一個函數(shù)。watch:{amount(newValue,oldValue){ console.log('數(shù)量變化了!’,"新值:", newValue,'舊值:',oldValue);},},data(){return{amount:50,};},watch偵聽二、深層偵聽器 watch默認的偵聽方式是淺層偵聽，即如果偵聽的數(shù)據(jù)是對象，僅在對象被賦新值時才會觸發(fā)回調(diào)函數(shù)；如果是對象中的屬性發(fā)生了變化則不會觸發(fā)。

如果想偵聽所有對象的屬性的變更，可以使用深層偵聽器。watch:{//默認watch監(jiān)聽不會進行深度監(jiān)聽,對象的屬性改變時不能被監(jiān)聽到info:{handler(newValue,oldValue){ console.log("偵聽到info改變:",newValue.id,oldValue.id);},//info進行深度監(jiān)聽:對象的屬性改變時也可以被監(jiān)聽到

deep:true,},},深度偵聽需要遍歷被偵聽對象中的所有屬性，當用于大型數(shù)據(jù)結(jié)構(gòu)時開銷很大，所以只在必要時才使用深度偵聽。watch偵聽三、即時回調(diào)的偵聽器watch默認是懶執(zhí)行的，即僅當數(shù)據(jù)源變化時，才會執(zhí)行回調(diào)。但在某些場景中，我們希望在創(chuàng)建偵聽器時，立即執(zhí)行一遍回調(diào)。watch:{//默認watch監(jiān)聽不會進行深度監(jiān)聽,對象的屬性改變時不能被監(jiān)聽到info:{handler(newValue,oldValue){ console.log("偵聽到info改變:",newValue.id,oldValue.id);},//info進行深度監(jiān)聽:對象的屬性改變時也可以被監(jiān)聽到

deep:true,

immediate:true,},},watch偵聽四、this.$watch()除了使用watch選項創(chuàng)建偵聽器外，還可以使用組件實例的$watch()方法來命令式地創(chuàng)建一個偵聽器。created(){this.$watch("amount",(newValue,oldValue)=>{console.log('數(shù)量變化了!',"新值:",newValue,'舊值:',oldValue);});},五、停止偵聽器用watch選項或者$watch()實例方法聲明的偵聽器，會在宿主組件卸載時自動停