建站
咨詢
售后
建站咨詢
新聞中心
#監(jiān)聽事件
我們可以使用 v-on 指令 (通?？s寫為 @ 符號) 來監(jiān)聽 DOM 事件，并在觸發(fā)事件時執(zhí)行一些 JavaScript。用法為 v-on:click="methodName" 或使用快捷方式 @click="methodName"
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,龍陵網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:龍陵等地區(qū)。龍陵做網(wǎng)站價格咨詢:18980820575
例如：
The button above has been clicked {{ counter }} times.
Vue.createApp({
data() {
return {
counter: 1
}
}
}).mount('#basic-event')結(jié)果： 點擊此處實現(xiàn)
#事件處理方法
然而許多事件處理邏輯會更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調(diào)用的方法名稱。
例如：
Vue.createApp({
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `this` 內(nèi)部 `methods` 指向當(dāng)前活動實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}).mount('#event-with-method')結(jié)果： 點擊此處實現(xiàn)
#內(nèi)聯(lián)處理器中的方法
除了直接綁定到一個方法，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法：
Vue.createApp({
methods: {
say(message) {
alert(message)
}
}
}).mount('#inline-handler')結(jié)果： 點擊此處實現(xiàn)
有時也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
// ...
methods: {
warn(message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}
}#多事件處理器
事件處理程序中可以有多個方法，這些方法由逗號運算符分隔：
// ...
methods: {
one(event) {
// first handler logic...
},
two(event) {
// second handler logic...
}
}#事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
.stop.prevent.capture.self.once.passive
...
...TIP
使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒有閱讀關(guān)于組件的文檔，現(xiàn)在大可不必?fù)?dān)心。
Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符。
... 這個 .passive 修飾符尤其能夠提升移動端的性能。
TIP
不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。
#按鍵修飾符
在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 或者 @ 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符。
在上述示例中，處理函數(shù)只會在 $event.key 等于 'PageDown' 時被調(diào)用。
#按鍵別名
Vue 為最常用的鍵提供了別名：
.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right
#系統(tǒng)修飾鍵
可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl.alt.shift.meta
提示
注意：在 Mac 系統(tǒng)鍵盤上，meta 對應(yīng) command 鍵 (?)。在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上，meta 對應(yīng)實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。
例如：
Do somethingTIP
請注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會觸發(fā)事件。
#.exact 修飾符
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
#鼠標(biāo)按鈕修飾符
.left.right.middle
這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。
#為什么在 HTML 中監(jiān)聽事件？
你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點分離 (separation of concern) 這個長期以來的優(yōu)良傳統(tǒng)。但不必?fù)?dān)心，因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護上的困難。實際上，使用 v-on 或 @ 有幾個好處：
- 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應(yīng)的方法。
- 因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
- 當(dāng)一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何清理它們。
本文名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0事件處理
文章網(wǎng)址：http://www.5511xx.com/article/dhpighd.html
