監聽事件
我們可(kě)以使用 v-on 指令 (簡寫為(wèi) @) 來監聽 DOM 事件，并在事件觸發時(shí)執行(xíng)對應的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
事件處理器 (handler) 的值可(kě)以是：
內(nèi)聯事件處理器：事件被觸發時(shí)執行(xíng)的內(nèi)聯 JavaScript 語句 (與 onclick 類似)。
方法事件處理器：一(yī)個指向組件上(shàng)定義的方法的屬性名或是路徑。
內(nèi)聯事件處理器
內(nèi)聯事件處理器通(tōng)常用于簡單場景，例如(rú)：
js
data() {
return {
count: 0
}
}
template
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
方法事件處理器
随着事件處理器的邏輯變得愈發複雜(zá)，內(nèi)聯代碼方式變得不夠靈活。因此 v-on 也可(kě)以接受一(yī)個方法名或對某個方法的調用。
舉例來說：
js
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// 方法中的 `this` 指向當前活躍的組件實例
alert(`Hello ${this.name}!`)
// `event` 是 DOM 原生事件
if (event) {
alert(event.target.tagName)
}
}
}
template
<!-- `greet` 是上(shàng)面定義過的方法名 -->
<button @click="greet">Greet</button>
方法事件處理器會自(zì)動接收原生 DOM 事件并觸發執行(xíng)。在上(shàng)面的例子中，我們能(néng)夠通(tōng)過被觸發事件的 event.target.tagName 訪問(wèn)到該 DOM 元素。
你也可(kě)以看(kàn)看(kàn)為(wèi)事件處理器标注類型這(zhè)一(yī)章(zhāng)了(le)解更多。
方法與內(nèi)聯事件判斷
模闆編譯器會通(tōng)過檢查 v-on 的值是否是合法的 JavaScript 标識符或屬性訪問(wèn)路徑來斷定是何種形式的事件處理器。舉例來說，foo、foo.bar 和(hé) foo['bar'] 會被視(shì)為(wèi)方法事件處理器，而 foo() 和(hé) count++ 會被視(shì)為(wèi)內(nèi)聯事件處理器。
在內(nèi)聯處理器中調用方法
除了(le)直接綁定方法名，你還可(kě)以在內(nèi)聯事件處理器中調用方法。這(zhè)允許我們向方法傳入自(zì)定義參數(shù)以代替原生事件：
js
methods: {
say(message) {
alert(message)
}
}
template
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>
在內(nèi)聯事件處理器中訪問(wèn)事件參數(shù)
有時(shí)我們需要(yào)在內(nèi)聯事件處理器中訪問(wèn)原生 DOM 事件。你可(kě)以向該處理器方法傳入一(yī)個特殊的 $event 變量，或者使用內(nèi)聯箭頭函數(shù)：
template
<!-- 使用特殊的 $event 變量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- 使用內(nèi)聯箭頭函數(shù) -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>
js
methods: {
warn(message, event) {
// 這(zhè)裏可(kě)以訪問(wèn) DOM 原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
}
事件修飾符
在處理事件時(shí)調用 event.preventDefault() 或 event.stopPropagation() 是很(hěn)常見(jiàn)的。盡管我們可(kě)以直接在方法內(nèi)調用，但(dàn)如(rú)果方法能(néng)更專注于數(shù)據邏輯而不用去處理 DOM 事件的細節會更好。
為(wèi)解決這(zhè)一(yī)問(wèn)題，Vue 為(wèi) v-on 提供了(le)事件修飾符。修飾符是用 . 表示的指令後綴，包含以下(xià)這(zhè)些：
.stop
.prevent
.self
.capture
.once
.passive
template
<!-- 單擊事件将停止傳遞 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加載頁面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修飾語可(kě)以使用鏈式書(shū)寫 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可(kě)以隻有修飾符 -->
<form @submit.prevent></form>
<!-- 僅當 event.target 是元素本身時(shí)才會觸發事件處理器 -->
<!-- 例如(rú)：事件處理器不來自(zì)子元素 -->
<div @click.self="doThat">...</div>
TIP
使用修飾符時(shí)需要(yào)注意調用順序，因為(wèi)相關代碼是以相同的順序生成的。因此使用 @click.prevent.self 會阻止元素及其子元素的所有點擊事件的默認行(xíng)為(wèi)，而 @click.self.prevent 則隻會阻止對元素本身的點擊事件的默認行(xíng)為(wèi)。
.capture、.once 和(hé) .passive 修飾符與原生 addEventListener 事件相對應：
template
<!-- 添加事件監聽器時(shí)，使用 `capture` 捕獲模式 -->
<!-- 例如(rú)：指向內(nèi)部元素的事件，在被內(nèi)部元素處理前，先被外(wài)部處理 -->
<div @click.capture="doThis">...</div>
<!-- 點擊事件最多被觸發一(yī)次 -->
<a @click.once="doThis"></a>
<!-- 滾動事件的默認行(xíng)為(wèi) (scrolling) 将立即發生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>
.passive 修飾符一(yī)般用于觸摸事件的監聽器，可(kě)以用來改善移動端設備的滾屏性能(néng)。
TIP
請(qǐng)勿同時(shí)使用 .passive 和(hé) .prevent，因為(wèi) .passive 已經向浏覽器表明(míng)了(le)你不想阻止事件的默認行(xíng)為(wèi)。如(rú)果你這(zhè)麽做(zuò)了(le)，則 .prevent 會被忽略，并且浏覽器會抛出警告。
按鍵修飾符
在監聽鍵盤事件時(shí)，我們經常需要(yào)檢查特定的按鍵。Vue 允許在 v-on 或 @ 監聽按鍵事件時(shí)添加按鍵修飾符。
template
<!-- 僅在 `key` 為(wèi) `Enter` 時(shí)調用 `submit` -->
<input @keyup.enter="submit" />
你可(kě)以直接使用 KeyboardEvent.key 暴露的按鍵名稱作(zuò)為(wèi)修飾符，但(dàn)需要(yào)轉為(wèi) kebab-case 形式。
template
<input @keyup.page-down="onPageDown" />
在上(shàng)面的例子中，僅會在 $event.key 為(wèi) 'PageDown' 時(shí)調用事件處理。
按鍵别名
Vue 為(wèi)一(yī)些常用的按鍵提供了(le)别名：
.enter
.tab
.delete (捕獲“Delete”和(hé)“Backspace”兩個按鍵)
.esc
.space
.up
.down
.left
.right
系統按鍵修飾符
你可(kě)以使用以下(xià)系統按鍵修飾符來觸發鼠标或鍵盤事件監聽器，隻有當按鍵被按下(xià)時(shí)才會觸發。
.ctrl
.alt
.shift
.meta
注意
在 Mac 鍵盤上(shàng)，meta 是 Command 鍵 (⌘)。在 Windows 鍵盤上(shàng)，meta 鍵是 Windows 鍵 (⊞)。在 Sun 微(wēi)機系統鍵盤上(shàng)，meta 是鑽石鍵 (◆)。在某些鍵盤上(shàng)，特别是 MIT 和(hé) Lisp 機器的鍵盤及其後代版本的鍵盤，如(rú) Knight 鍵盤，space-cadet 鍵盤，meta 都(dōu)被标記為(wèi)“META”。在 Symbolics 鍵盤上(shàng)，meta 也被标識為(wèi)“META”或“Meta”。
舉例來說：
template
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 點擊 -->
<div @click.ctrl="doSomething">Do something</div>
TIP
請(qǐng)注意，系統按鍵修飾符和(hé)常規按鍵不同。與 keyup 事件一(yī)起使用時(shí)，該按鍵必須在事件發出時(shí)處于按下(xià)狀态。換句話說，keyup.ctrl 隻會在你仍然按住 ctrl 但(dàn)松開(kāi)了(le)另一(yī)個鍵時(shí)被觸發。若你單獨松開(kāi) ctrl 鍵将不會觸發。
.exact 修飾符
.exact 修飾符允許控制觸發一(yī)個事件所需的确定組合的系統按鍵修飾符。
template
<!-- 當按下(xià) Ctrl 時(shí)，即使同時(shí)按下(xià) Alt 或 Shift 也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 僅當按下(xià) Ctrl 且未按任何其他(tā)鍵時(shí)才會觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 僅當沒有按下(xià)任何系統按鍵時(shí)觸發 -->
<button @click.exact="onClick">A</button>
鼠标按鍵修飾符
.left
.right
.middle
這(zhè)些修飾符将處理程序限定為(wèi)由特定鼠标按鍵觸發的事件。
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發