Vue中的事件處理詳情
更新時(shí)間：2022年05月27日 10:47:12 作者：??奔跑吧雞翅????
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下
一、事件處理
給按鈕綁定一個(gè) click 事件，點(diǎn)擊彈出提示信息
<!--普通寫法-->
<button v-on:click="showInfo">點(diǎn)我</button>
<!--簡寫-->
<button @click="showInfo">點(diǎn)我</button>
new Vue({
el:'#root',
methods:{
showInfo(){
alert('Hello')
}
}
})
我們來增加參數(shù)：
<button @click="showInfo($event,'world')">點(diǎn)我</button>
showInfo(event,name){
//console.log(event.target.innerHTML);//點(diǎn)我
//console.log(this);//此處的this是vm（vue實(shí)例對象）
//所有被vue管理的函數(shù)最好都寫成普通函數(shù)，不要寫成箭頭函數(shù)
//否則this就變成了window
alert('Hello '+name)
}
如果只寫 showInfo('world') 那么方法中的 event 參數(shù)就不能用了，所以我們加了一個(gè) $event來占位
事件的基本使用 ：
- 1.使用
v-on :xxx或@xxx綁定事件，其中xxx是事件名 - 2.事件的回調(diào)需要配置在 methods 對象中，最終會在 vm 上
- 3.methods 中配置的函數(shù)，不要用箭頭函數(shù)！否則 this 就不是 vm 了
- 4.methods 中配置的函數(shù)，都是被Vue 所管理的函數(shù)，this 的指向是 vm 或組件實(shí)例對象
- 5.
@click="demo”和@click="demo($event)”效果一致，但后者可以傳參
二、事件修飾符
Vue中的事件修飾符
- 1.
prevent: 阻止默認(rèn)事件 - 2.
stop:阻止事件冒泡 - 3.
once:事件只觸發(fā)一次 - 4.
capture:使用事件的捕獲模式 - 5.
self:只有 event.target 是當(dāng)前操作的元素時(shí)才觸發(fā)事件 - 6.
passive:事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初識</title>
<script type="text/javascript" src="./js/vue.js"></script>
<style>
*{
margin: 20px;
}
.demo1{
width: 100px;
height: 100px;
background: aqua;
}
.div1{
padding: 5px;
background: skyblue;
}
.div2{
padding: 5px;
background: orange;
}
.list{
width: 200px;
height: 200px;
background: hotpink;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<!--阻止默認(rèn)事件。默認(rèn)點(diǎn)擊后提示信息，然后跳轉(zhuǎn)百度首頁，現(xiàn)在只提示信息不跳轉(zhuǎn)-->
<a rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">點(diǎn)我提示信息</a>
<!--阻止事件冒泡，本來點(diǎn)擊按鈕后會提示信息，事件冒泡到div上，還會再彈信息，現(xiàn)在只會彈一次-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">點(diǎn)我提示信息</button>
</div>
<!--事件只觸發(fā)一次，本來每次點(diǎn)都提示信息，現(xiàn)在只提示一次，再點(diǎn)擊就不提示了-->
<button @click.once="showInfo">點(diǎn)我提示信息</button>
<!--使用事件的捕獲模式，本來點(diǎn)擊div2，控制臺會輸出div2，然后輸出div1。因?yàn)閺膁iv2冒泡到了div1 -->
<!--事件是先捕獲再冒泡-->
<!--在div1增加了.capture那么div1的事件在捕獲階段就開始了，所以控制臺會先輸出div1再div2-->
<div class="div1" @click.capture="showMsg('div1')">
div1
<div class="div2" @click="showMsg('div2')">
div2
</div>
</div>
<!--只有 event.target 是當(dāng)前操作的元素時(shí)才觸發(fā)事件-->
<!--本來會提示兩遍信息，如果在方法中輸出event.target，那么會輸出兩遍button-->
<!--現(xiàn)在給div1增加了.self,當(dāng)點(diǎn)擊按鈕時(shí)，click事件冒泡到div1后，觸發(fā)div1的click-->
<!--但是click的event.target是button，而不是div1，所以這次冒泡后的click不執(zhí)行-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">點(diǎn)我提示信息</button>
</div>
<!--事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢-->
<!--scroll是頁面滾動條滾動會觸發(fā)的事件，而wheel是鼠標(biāo)滾輪滾動會觸發(fā)的事件-->
<!--一旦滾動條到底部后，滑動鼠標(biāo)滾輪繼續(xù)滾動，wheel就會一直觸發(fā)，而scroll不會觸發(fā)-->
<!--@wheel 當(dāng)滾輪滾動后，執(zhí)行demo，執(zhí)行完demo，頁面上的滾動條才向下滾動-->
<!--@wheel 增加.passive后，當(dāng)滾輪滾動后，滾輪會先執(zhí)行，不用等待執(zhí)行完demo-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
methods:{
showInfo(e){
alert('你好')
//console.log(e.target);
},
showMsg(res){
console.log(res);
},
demo(){
for (let i=0;i<100000;i++){
console.log("#");
}
console.log("累~~??！");
}
}
})
</script>
</body>
</html>
三、鍵盤事件
給 input 綁定一個(gè) keyup 事件，輸入文字按下回車，打印輸入內(nèi)容，可以這樣寫：
<input type="text" placeholder="按下回車提示輸入" @keyup="showInfo">
new Vue({
el:'#root',
methods:{
showInfo(e){
//判斷是否回車
if(e.keyCode !== 13) return
console.log(e.target.value);
}
}
})
但我們也可以使用回車鍵的別名：
<input type="text" placeholder="按下回車提示輸入" @keyup.enter="showInfo">
new Vue({
el:'#root',
methods:{
showInfo(e){
console.log(e.target.value);
}
}
})1、Vue中常用的按鍵別名 回車 =>enter 刪除=>delete(捕獲"刪除”和“退格”鍵) 退出=>esc 空格=>space 換行=> tab（特殊，必須配合 keydown 去使用） 上=> up 下=>down 左=>left 右=>right
2、Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為 kebab-case（短橫線命名)
我們可以通過輸出 e.key 和 e.keyCode 來查看按鍵原始值
showInfo(e){
console.log(e.key,e.keyCode);
}
所以回車鍵也可以這樣寫 @keyup.Enter="showInfo" 需要注意的是切換大小寫的 CapsLock 需要這樣寫 @keyup.caps-lock="showInfo"
3、系統(tǒng)修飾鍵(用法特殊）：ctrl、alt、 shift、meta(win)
(1).配合 keyup 使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)(2).配合keydown使用：正常觸發(fā)事件
例如我們需要按下 ctrl 時(shí)執(zhí)行 showInfo 方法
<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl="showInfo">
運(yùn)行程序，單純按 ctrl 是不管用的，只有 ctrl 和其他按鍵一起按下，例如 ctrl+z 然后再放開 z ，showInfo 方法才能執(zhí)行
4、也可以使用keyCode去指定具體的按鍵（不推薦)
綁定回車按鍵
<input type="text" placeholder="按下回車提示輸入" @keyup.13="showInfo">
5.Vue.config.keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名（不推薦）
<input type="text" placeholder="按下回車提示輸入" @keyup.huiche="showInfo"> Vue.config.keyCodes.huiche = 13
使用技巧
1、事件修飾符可以寫多個(gè)
<div class="demo1" @click="showInfo"> <a rel="external nofollow" rel="external nofollow" @click.stop.prevent="showInfo">點(diǎn)我提示信息</a> </div>
運(yùn)行結(jié)果是只會提示 1 次信息，不會跳轉(zhuǎn)
2、之前說了系統(tǒng)修飾符配合 keyup 使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。如果就是需要兩個(gè)按鍵同時(shí)觸發(fā)事件可以這樣寫： 例如，需要同時(shí)按下 ctrl+y 才執(zhí)行 showInfo
<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl.y="showInfo">
到此這篇關(guān)于Vue中的事件處理詳情的文章就介紹到這了,更多相關(guān)Vue事件處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element校驗(yàn)validate的實(shí)例
這篇文章主要介紹了Vue Element校驗(yàn)validate的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個(gè)門檻值，表示兩次?Ajax?通信的最小間隔時(shí)間。如果在間隔時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計(jì)時(shí)。如果過了指定時(shí)間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
這篇文章主要介紹了vue 簡單自動補(bǔ)全的輸入框的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼，本文給大家分享實(shí)現(xiàn)思路，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 頁面切換效果之 BubbleTransition(推薦)
使用 vue，vue-router，animejs 來講解如何實(shí)現(xiàn)vue頁面切換效果之 BubbleTransition，需要的朋友參考下吧2018-04-04
vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue的組件間傳值(包括Vuex)，全文通過舉例子及代碼的形式進(jìn)行了一個(gè)簡單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識2021-08-08
這篇文章主要為大家介紹了Vue2.0生命周期，思考與理解“el被新創(chuàng)建的vm.$el替換”這句話，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目（一），接下來就來看看Vue3集成Ant Design Vue 的相關(guān)資料，需要的小伙伴可以參考一下文章的具體內(nèi)容2021-10-10