溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue基本事件處理實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
Vue 事件處理是每個 Vue 項目的必要方面。它用于捕獲用戶輸入，共享數據以及許多其他創造性方式。
使用 v-on 指令（@ 簡稱），我們可以監聽 DOM 事件并運行處理程序方法或內聯 Javascript：
<div v-on:click='handleClick' /> <!-- 相當于 --> <div @click='handleClick' />
我們將介紹您可能想捕獲的一些更常見的事件，單擊此處以獲取 DOM 事件的完整列表。
任何 Web 框架中的常見用例都是希望子組件能夠向其父組件發出事件。這將允許雙向數據綁定。
這樣的一個示例是將數據從輸入組件發送到父表單。
根據我們使用的是 Options API 還是 Composition API，發出事件的語法是不同的。
在 Options API 中，我們可以簡單地調用 this.$emit(eventName, payload)：
export default {
methods: {
handleUpdate() {
this.$emit('update', 'Hello World')
}
}
}但是，Composition API 沒有 this。相反，我們可以使用 Vue3 setup 方法直接訪問 emit 方法。
setup 方法的第二個參數是上下文變量，它包含三個屬性：attrs、slot 和 emit。
只要導入上下文對象，就可以使用與 Options API 相同的參數來調用 emit。
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}整理代碼的一種方法是使用對象解構直接導入 emit。看起來像這樣。
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}無論我們使用 Options API 還是 Composition API，我們的父組件都以相同的方式監聽自定義事件。
<HelloWorld @update='inputUpdated'/>
如果我們發出的方法也傳遞了一個值，則可以用兩種不同的方式捕獲它-取決于我們是內聯工作還是使用其他方法。
首先，我們可以 $event 在模板中使用傳遞的值。
<HelloWorld @update='inputUpdated($event)'/>
其次，如果我們使用方法來處理事件，則傳遞的值將作為第一個參數自動傳遞給我們的方法。
<HelloWorld @update='inputUpdated'/>
<script>
methods: {
inputUpdated: (value) => {
console.log(value) // WORKS TOO
}
}
</ script>以下是我們可以在 v-on 指令中捕獲的主要 DOM 鼠標事件 的列表：
<div @mousedown='handleEvent' @mouseup='handleEvent' @click='handleEvent' @dblclick='handleEvent' @mousemove='handleEvent' @mouseover='handleEvent' @mousewheel='handleEvent' @mouseout='handleEvent' > 與我互動！ </div>
對于我們的點擊事件，我們還可以添加鼠標事件修飾符來限制哪些鼠標按鈕將觸發我們的事件。有三個鼠標按鍵：left、right 和 middle。
<!-- 這將僅在鼠標左鍵單擊時觸發 --> <div @mousedown.left='handleLeftClick'> Left </div>
我們可以監聽三個 DOM 鍵盤事件：
<input type="text" placeholder="Type something" @keypress="handleKeyPressed" @keydown="handleKeyDown" @keyup="handleKeyUp" />
通常，我們希望在某個按鍵上監聽這些事件，Vue 具有某些鍵的別名可以幫助到我們。
enter
tab
delete（捕獲“刪除”和“退格”鍵）
esc
space
up
down
left
right
<input type='text' placeholder='Type something' @keyup.enter='handleEnter' />
需要注意的是，Vue 2.x 中，我們還可以使用鍵碼 的方式，但在 Vue3.x 不在適用：
<!-- --> <input type='text' placeholder='Type something' @keyup.13='handleEnter' />
一些特殊的字符無法被匹配，如 "、'、/、=、> 和 .。這些應該在監聽器內使用事件對象單獨判斷。
<input type='text' placeholder='Type something' @keyup.,='handleEnter' />
注意：Vue 3.x 不在支持自定義按鍵 config.keyCodes
對于某些項目，我們可能只想在用戶按下修飾符的情況下觸發事件。修飾符類似于 Command 或 shift。
在 Vue 中，有四個系統修飾符。
shift
alt
ctrl
meta （在 Mac 上為 cmd，在 Windows 上為 Windows 鍵）
這對于在 Vue 應用程序中創建諸如自定義鍵盤快捷鍵之類的功能非常有用。
<!-- 為 Shift + a clear 的自定義快捷方式 --> <button @keyup.shift.a="clear">清除</button>
在 Vue 文檔中，還有一個 exact 修飾符，確保僅在按下我們指定的鍵且沒有其他鍵的情況下才觸發事件。
<!-- 僅為 Shift + a 執行 clear --> <button @keyup.shift.a.exact="clear">清除</button>
鼠標按鈕修飾符：lefe、right 和 middle，默認行為為 left（左鍵點擊）。
<button @click.middle="clear">清除</button>
對于所有 DOM 事件，我們可以使用一些修飾符來更改其運行方式。無論是停止傳播還是阻止默認操作，Vue 都有幾個內置的 DOM 事件修飾符。
<!-- 阻止默認操作 --> <form @submit.prevent /> <!-- 停止事件傳播 --> <form @submit.stop="submitForm" /> <!-- 串聯的修飾符 --> <form @submit.stop.prevent="submitForm" /> <!-- 防止事件被觸發多次 --> <el-button @click.once="handleClose">執行一次</el-button>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
以下時 Vue 提供的完整事件修飾符：
stop 阻止事件傳播
prevent 阻止默認事件
capture 添加事件監聽器時使用事件捕獲模式，即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理
self 只當在 event.target 是當前元素自身時觸發處理函數，即事件不是從內部元素觸發的
once 僅執行一次
passive 修飾符尤其能夠提升移動端的性能
注意：不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。
<!-- 這其中包含 `event.preventDefault()` 的情況 --> <div @scroll.passive="onScroll">...</div>
滾動事件的默認行為（即滾動行為）將會立即觸發，而不會等待 onScroll 完成。
“vue基本事件處理實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
