VUE入門(mén)學(xué)習(xí)之事件處理
1. 函數(shù)綁定
可以用v-on:click="methodName"或者快捷方式 @click="methodName"綁定事件處理函數(shù)
@click="methodName()"也可以,@click="methodName"猜測(cè)是簡(jiǎn)寫(xiě)
<div v-on:click="add">{{ count }}</div> <div @click="add">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, },
2. 帶參數(shù)和$event
可以直接在往事件綁定的函數(shù)里傳參數(shù)和$event
<div @click="set(0, $event)">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, set(value, event) { console.log(event); this.count = value; }, },
3. 多個(gè)函數(shù)綁定一個(gè)事件
多個(gè)函數(shù)直接用逗號(hào)分隔,這里即使是沒(méi)有入?yún)⒌暮瘮?shù),也要加括號(hào),否則不會(huì)執(zhí)行那個(gè)函數(shù)
比如<div @click="set(0, $event), log">{{ count }}</div> 只會(huì)執(zhí)行set
<div @click="set(0, $event), log()">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, log() { console.log("log---"); }, set(value, event) { console.log(event); this.count = value; }, },
4. 事件修飾符
使用修飾符時(shí),順序很重要;相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a @click.stop="doThis"></a><!-- 提交事件不再重載頁(yè)面 -->
<form @submit.prevent="onSubmit"></form><!-- 修飾符可以串聯(lián) -->
<a @click.stop.prevent="doThat"></a><!-- 只有修飾符 -->
<form @submit.prevent></form><!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理,然后才交由內(nèi)部元素進(jìn)行處理 -->
<div @click.capture="doThis">...</div><!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div @click.self="doThat">...</div><!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 能被用到自定義的組件事件上 -->
<a @click.once="doThis"></a><!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<!-- 尤其能夠提升移動(dòng)端的性能 -->
<div @scroll.passive="onScroll">...</div>
5. 按鍵修飾符
.enter
.tab
.delete (
捕獲“刪除”和“退格”鍵).esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input @keyup.enter="submit" /><!-- 只有在 `key` 是 PageDown時(shí)調(diào)用 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />
6. 系統(tǒng)修飾鍵
事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)
.ctrl
.alt
.shift
.meta
<!-- 按住Alt, 按Enter -->
<input @keyup.alt.enter="clear" /><!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact 修飾符
<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button @click.exact="onClick">A</button>
鼠標(biāo)按鈕修飾符
<button @click.left="log('left cllilck')">鼠標(biāo)左擊</button> <button @click.right="log('right cllilck')">鼠標(biāo)右擊</button> <button @click.middle="log('middle cllilck')">鼠標(biāo)中擊</button>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue webpack build資源相對(duì)路徑的問(wèn)題及解決方法
這篇文章主要介紹了vue webpack build資源相對(duì)路徑的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06vue獲取token實(shí)現(xiàn)token登錄的示例代碼
最近新做了個(gè)vue項(xiàng)目,正好項(xiàng)目中有登錄部分,本文就詳細(xì)的介紹一下登錄部分的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2021-11-11詳解vue3結(jié)合ts項(xiàng)目中使用mockjs
這篇文章主要為大家介紹了vue3結(jié)合ts項(xiàng)目中使用mockjs示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-05-05如何使用vue3簡(jiǎn)單實(shí)現(xiàn)WebSocket通信
這篇文章主要給大家介紹了關(guān)于如何使用vue3簡(jiǎn)單實(shí)現(xiàn)WebSocket通信的相關(guān)資料,WebSocket是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實(shí)現(xiàn)了客戶端和服務(wù)器的平等對(duì)話,任何一方都可以主動(dòng)發(fā)送數(shù)據(jù),需要的朋友可以參考下2023-08-08