本文小編為大家詳細(xì)介紹“Vue3的事件處理和修飾符實(shí)例分析”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue3的事件處理和修飾符實(shí)例分析”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
成都創(chuàng)新互聯(lián)是專業(yè)的菏澤網(wǎng)站建設(shè)公司,菏澤接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行菏澤網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
使用v-on指令(簡稱@),我們可以監(jiān)聽DOM事件并運(yùn)行處理程序方法或內(nèi)聯(lián)Javascript。
// v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' />
任何Web框架中的常見用例都是希望子組件能夠向其父組件發(fā)出事件,這也是雙向數(shù)據(jù)綁定原理。
常見一個(gè)示例是將數(shù)據(jù)從 input組件發(fā)送到父表單。
根據(jù)我們使用的是Options API還是Composition API,發(fā)出事件的語法是不同的。
在 Options API 中,我們可以簡單地調(diào)用this.$emit(eventName, payload),示例如下:
export default { methods: { handleUpdate: () => { this.$emit('update', 'Hello World') } } }
但是,Composition API 使用方式與此不同。需要在 Vue3 提供的 setup方法使用emit方法。
只要導(dǎo)入context對象,就可以使用與Options API相同的參數(shù)調(diào)用emit。
export default { setup (props, context) { const handleUpdate = () => { context.emit('update', 'Hello World') } return { handleUpdate } } }
當(dāng)然,我在項(xiàng)目中經(jīng)常使用解構(gòu)的方式來使用:
export default { setup (props, { emit }) { const handleUpdate = () => { emit('update', 'Hello World') } return { handleUpdate } } }
完美!
無論我們使用Options 還是 Composition API,父組監(jiān)聽的方式都是一樣的。
<HelloWorld @update='inputUpdated'/>
首先,我們可以在模板中使用$ event訪問傳遞的值。
如果在組件 emit 出去方法有傳遞值,我們可以通過兩種不同的方式捕獲它,這取決于我們是使用內(nèi)聯(lián)還是使用方法。
第一種是在模板中使用$event訪問傳遞的值。
<HelloWorld @update='inputUpdated($event)'/>
第二,使用方法來處理事件,則傳遞的值將作為第一個(gè)參數(shù)自動(dòng)傳遞給我們的方法。
<HelloWorld @update='inputUpdated'/> // ... methods: { inputUpdated: (value) => { console.log(value) // WORKS TOO } }
下面是我們可以在v-on指令中捕獲的主要DOM鼠標(biāo)事件列表:
<div @mousedown='handleEvent' @mouseup='handleEvent' @click='handleEvent' @dblclick='handleEvent' @mousemove='handleEvent' @mouseover='handleEvent' @mousewheel='handleEvent' @mouseout='handleEvent' > Interact with Me! </div>
對于單擊事件,我們還可以添加鼠標(biāo)事件修飾符來限制哪個(gè)鼠標(biāo)按鈕將觸發(fā)我們的事件。有三個(gè): left,right 和 middle。
<!-- 這只會(huì)觸發(fā)鼠標(biāo)左鍵 --> <div @mousedown.left='handleLeftClick'> Left </div>
我們可以聽三個(gè)DOM鍵盤事件:
<input type='text' placeholder='Type something' @keypress='handleKeyPressed' @keydown='handleKeyDown' @keyup='handleKeyUp' />
通常,我們想檢測某個(gè)鍵上的這些事件,有兩種方法可以執(zhí)行此操作。
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
keycodes
Vue具有某些鍵的別名(enter, tab, delete, esc, space, up, down, left, right)
<!-- Trigger even when enter is released --> <input type='text' placeholder='Type something' @keyup.enter='handleEnter' /> <!-- OR --> <input type='text' placeholder='Type something' @keyup.13='handleEnter' />
對于某些項(xiàng)目,我們可能只想在用戶按下修飾鍵的情況下觸發(fā)事件。修飾鍵類似于Command或shift。
在Vue中,有四個(gè)系統(tǒng)修飾符。
shift
alt
ctrl
meta (在mac上是CMD,在Windows上是Windows鍵)
這對于在Vue應(yīng)用程序中創(chuàng)建諸如自定義鍵盤快捷鍵之類的功能非常有用。
<!-- 自定義快捷方式,楊使用Shift + 8 創(chuàng)建列表 --> <input type='text' placeholder='Type something' @keyup.shift.56='createList' />
在Vue文檔中,還有一個(gè)exact的修飾符,以確保僅在按下我們指定的鍵且沒有其他鍵的情況下才觸發(fā)事件。
<!-- 自定義快捷方式,只有Shift + 8 這兩個(gè)按下時(shí)才會(huì)創(chuàng)建列表--> <input type='text' placeholder='Type something' @keyup.shift.56.exact='createList' />
對于所有DOM事件,我們可以使用一些修飾符來更改其運(yùn)行方式。無論是停止傳播還是阻止默認(rèn)操作,Vue都有兩個(gè)內(nèi)置的DOM事件修飾符。
<!-- 阻止默認(rèn)行為 --> <form @submit.prevent> <!-- 阻止冒泡 --> <form @submit.stop='submitForm'> <!-- 阻止默認(rèn)行為和冒泡 --> <form @submit.stop.prevent='submitForm'> <!-- 防止事件被多次觸發(fā) --> <div @close.once='handleClose'>
讀到這里,這篇“Vue3的事件處理和修飾符實(shí)例分析”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁名稱:Vue3的事件處理和修飾符實(shí)例分析
URL分享:http://bm7419.com/article46/pciheg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、域名注冊、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)