vue中的事件綁定舉例詳解
1 事件處理
1.1 最簡單的事件綁定例子
在vue當(dāng)中，要給元素綁定事件需要用到vue指令，指令一般以v-開頭，例如綁定單擊事件的指令是v-on:click = “函數(shù)名”，簡寫為@click = “函數(shù)名”
例如以下例子：單擊button按鈕，執(zhí)行showInfo函數(shù)，彈出alert窗口。
<body>
<button class="btn" v-on:click = "showInfo">點擊彈出{{name}}窗口</button>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
data:{
name:"alert"
},
methods:{
showInfo(){
alert('hello!');
}
}
})
vm.$mount('.btn')
</script>
</body>以上是最簡單的事件綁定例子，鼠標(biāo)懸停、鼠標(biāo)移出等事件可以參照以上例子。
vm.$mount(".btn")指定了可供vue操作的元素，與el關(guān)鍵字的作用類似，但比el更加靈活。
methods記錄了所有的方法，凡事與vue所操作元素有關(guān)的方法都應(yīng)該寫在method里面，否則無效。
在button屬性里面，使用v-on:click綁定了一個單擊事件，當(dāng)點擊此對象時，就執(zhí)行showInfo函數(shù)。
1.2 默認參數(shù)event
這一步是探究methods配置項中，函數(shù)的傳參問題。在上一個例子當(dāng)中，設(shè)置了showInfo函數(shù)，這是自定義的函數(shù)，現(xiàn)在探究這個函數(shù)它默認情況下怎么接收函數(shù)。首先，為showInfo設(shè)置三個參數(shù)的位置，分別為a，b，c，然后后臺輸出a，b，c這三個參數(shù)，看看哪一個參數(shù)里面存的有東西。代碼如下所示：
<body>
<button class="btn" v-on:click = "showInfo">點擊彈出{{name}}窗口</button>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
data:{
name:"alert"
},
methods:{
showInfo(a,b,c){
alert('hello!');
console.log(a,b,c);
}
}
})
vm.$mount('.btn')
</script>
</body>
可以發(fā)現(xiàn)輸出的a,b,c當(dāng)中只有a有東西，其他的全部為undefined?？梢园l(fā)現(xiàn)a里面存放的是一個名為PointerEvent（百度翻譯：指針事件）的對象，其實就是事件對象event，有點像事件委托當(dāng)中的event?？梢試L試以下代碼。
methods:{
showInfo(event){
alert('hello!');
console.log(event.target);
console.log(event.target.innerHTML);
}
}輸出結(jié)果：分別彈出被點擊的標(biāo)簽、被點擊標(biāo)簽的文本內(nèi)容。
1.3 其它自定義參數(shù)
先寫好兩個按鈕，這兩個按鈕點擊之后會觸發(fā)相應(yīng)的函數(shù)，btn1觸發(fā)showInfo1函數(shù)，btn2觸發(fā)showInfo2函數(shù)，showInfo1不傳參數(shù)，showInfo2傳入一個參數(shù)。接著，在methods中配置好showInfo1與showInfo2函數(shù)。代碼如下所示：
<body>
<button class="btn" v-on:click = "showInfo1">按鈕1</button>
<button class="btn" v-on:click = "showInfo2(66)">按鈕2</button>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods:{
showInfo1(a){
console.log( `showInfo1:${a}`);
},
showInfo2(a){
console.log( `showInfo2:${a}`);
}
}
})
vm.$mount('.btn')
</script>
</body>輸出結(jié)果：
showInfo1沒有傳入任何參數(shù)，所以showInfo1的第一次參數(shù)位默認為event ，showInfo2我們給它傳入了數(shù)字66作為第一個參數(shù)，所以showInfo2輸出66 ，但這樣做之后，event消失了。解決辦法，再傳入一個$event參數(shù)，$event是一個關(guān)鍵字，vue會自動將其解析為event，這個參數(shù)無論作為第幾個參數(shù)都可以。代碼如下所示：
<body>
<div class="btns">
<button v-on:click = "showInfo1">按鈕1</button>
<button v-on:click = "showInfo2(66,$event)">按鈕2</button>//添加$evetn
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods:{
showInfo1(a){
console.log( `showInfo1:${a}`);
},
showInfo2(a,b){//增加形參b
console.log( `showInfo2:${a},$`);
}
}
})
vm.$mount('.btns')
</script>輸出結(jié)果：
1.4 this
methods中的配置函數(shù)，都是被vue所管理的函數(shù)，this指向vm或組件實例對象，所以showInfo中的this指向vue實例（即例子當(dāng)中的vm），若showInfo使用箭頭函數(shù)，則this指向window。箭頭函數(shù)的寫法如下所示：
methods:{
showInfo:(event) => {
alert('hello!');
console.log(event.target);
console.log(event.target.innerHTML);
}
}受vue所管理的函數(shù)最好寫成普通函數(shù)，而不是寫成箭頭函數(shù)，不然會影響this的指向。
2 事件修飾符
2.1 prevent阻止默認事件（常用）
一般用在有默認事件的標(biāo)簽上，例如點擊a標(biāo)簽時的默認跳轉(zhuǎn)行為，寫法是@click.prevent="函數(shù)名"
2.2 stop阻止事件冒泡（常用）
例如在以下代碼當(dāng)中，若先將button元素中的v-on:click.stop="showInfo1"改寫為v-on:click="showInfo1"，那么此時點擊button按鈕會彈出兩次alert窗口。為什么？因為button元素和它的父級元素都有click事件，所以，如果點擊button按鈕不僅會觸發(fā)button的單擊事件，同時也會觸發(fā)div的click事件，這種行為叫做冒泡，若在button元素中的單擊事件中添加stop事件修飾符，那么會在button元素這一步停止冒泡行為。
<body>
<div v-on:click="showInfo1" class="btns">
<button v-on:click.stop="showInfo1">按鈕1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
methods: {
showInfo1() {
alert(`彈出信息！`);
}
}
})
vm.$mount('.btns')
</script>
</body>2.3 once事件只觸發(fā)一次（常用）
以上面的代碼為例，每一次點擊button都會出現(xiàn)alert彈窗，如果我想讓它在第一次點擊的時候出現(xiàn)彈窗，以后無論點多少從都不出現(xiàn)彈窗，該怎么做。
只需將button的單擊事件改寫為v-on:click.once='showInfo1'即可。
2.4 capture使用事件的捕獲模式
捕獲（由外往內(nèi)），冒泡（由內(nèi)往外），先捕獲再冒泡，程序默認在冒泡階段處理事件。
capture可以使程序在捕獲階段就開始處理事件。
首先觀察以下不加任何修飾符的代碼。
<body>
<div v-on:click="showInfo1(1)" class="btns">
div1
<div v-on:click="showInfo1(2)">
div2
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
methods: {
showInfo1(number) {
console.log(`${number}`);
}
}
})
vm.$mount('.btns')
</script>
</body>代碼的大致意思是：我點擊哪一個div元素就在控制臺輸出它的序號，觀察它的輸出順序。若點擊div1，則后臺只輸出1，若點擊div2，則后臺就接著輸出2、1（有先后順序），為什么點擊div2的時候還要多輸出1呢？因為默認使用了事件的冒泡模式，事件處理函數(shù)默認在冒泡階段被執(zhí)行。現(xiàn)在我想讓div1在捕獲階段就被執(zhí)行，那么只需要在div的單擊事件上添加capture事件修飾符即可。代碼示例如下：
<body>
<div v-on:click.capture="showInfo1(1)" class="btns">
div1
<div v-on:click="showInfo1(2)">
div2
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
methods: {
showInfo1(number) {
console.log(`${number}`);
}
}
})
vm.$mount('.btns')
</script>
</body>此時若再來點擊div2，則控制臺彈出1、2（有先后順序），與剛才的截然相反。
但有一個誤區(qū)值得注意，div1的事件是在捕獲階段被觸發(fā)的，div2的事件仍然是在冒泡階段觸發(fā)的，簡單總結(jié)就是有capture的事件才會在捕獲階段觸發(fā)，沒有capture的事件仍然在冒泡階段被觸發(fā)，這一點可以通過以下例子被證實：
<body>
<div v-on:click.capture="showInfo1(1)" class="btns">
div1
<div v-on:click="showInfo1(2)">
div2
<div v-on:click="showInfo1(3)">
div3
</div>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
methods: {
showInfo1(number) {
console.log(`${number}`);
}
}
})
vm.$mount('.btns')
</script>
</body>觀察代碼發(fā)現(xiàn)，只有div1有capture，所以當(dāng)點擊div3的時候，控制臺先后輸出1、3、2。
2.5 self只有event.target是當(dāng)前的操作元素時才出發(fā)事件
這個2.5的標(biāo)題可能有點難以理解，首先來看看event.target是什么。先來個例子：
<body>
<div v-on:click="showInfo2" class="btns">
div
<span v-on:click="showInfo1">
span
</span>
</div>
<script type="text/javascript">
const vm = new Vue({
methods: {
showInfo1(event) {
console.log(`我是span我點擊的是${event.target}`);
},
showInfo2(event) {
console.log(`我是div我點擊的是${event.target}`);
}
}
})
vm.$mount('.btns')
</script>
</body>以上代碼大致意思是，若點擊div則執(zhí)行showInfo1，若點擊span則執(zhí)行showInfo2。
若點擊div，則后臺輸出情況如下：這一條結(jié)果對應(yīng)的是div標(biāo)簽的事件，且從語句中我們可得知被點擊的是div標(biāo)簽。
若點擊span，則后臺輸出情況如下：因為冒泡輸出了兩個結(jié)果，但從兩條結(jié)果中都可獲知被點擊的是span標(biāo)簽。
所以，綜上所述，event.target代表被點擊的對象，無論當(dāng)前被捕獲（或冒泡）到哪一個元素，event.target的值都不變。
再次回到self事件修飾符，只有self的作用對象與event.target目標(biāo)對象是同一個時，事件才被執(zhí)行。以下是示例代碼：（在第二行添加了self）
<body>
<div v-on:click.self="showInfo2" class="btns">
div
<span v-on:click="showInfo1">
span
</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods: {
showInfo1(event) {
console.log(`我是span我點擊的是${event.target}`);
},
showInfo2(event) {
console.log(`我是div我點擊的是${event.target}`);
}
}
})
vm.$mount('.btns')
</script>
</body>這時候點擊span就不會出現(xiàn)兩條結(jié)果了，而是只出現(xiàn)“我是span我點擊的是[objectHTMLSpanElement]”。
為什么這時候只有一條語句呢，因為點擊span后，代碼首先執(zhí)行span的事件，然后再冒泡到div，發(fā)現(xiàn)div有self，但event.target的并不是div，所以div的事件就沒有執(zhí)行。若直接點擊div，則div的事件正常執(zhí)行。
2.6 passive事件的默認行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢
事件的默認行為就例如：a標(biāo)簽點擊會跳轉(zhuǎn)、鼠標(biāo)輪滾動頁面也會滾動等等。
@scroll是滾動條滾動事件，@wheel是鼠標(biāo)滾輪滾動事件，兩者有區(qū)別。
passive一般用在什么情況？（如下）
以鼠標(biāo)滾動事件為例，當(dāng)不考慮passive時，并且設(shè)置了滾動時需要執(zhí)行函數(shù)的機制時，執(zhí)行順序是：
觸發(fā)滾動事件——執(zhí)行滾動時的函數(shù)——頁面滾動
以上順序需要等待函數(shù)執(zhí)行完畢頁面才能滾動，若所執(zhí)行的函數(shù)耗時非常大，就會造成卡頓現(xiàn)象。
面對此現(xiàn)象，如果加上passive事件修飾符，那么函數(shù)和默認事件就會同時執(zhí)行，且不會造成頁面卡頓現(xiàn)象。
2.7 事件修飾符的連續(xù)使用
如果既需要阻止冒泡，又需要阻止默認跳轉(zhuǎn)行為，則寫法應(yīng)如下：
@click.stop.prevent = "函數(shù)名"或者@click.prevent.stop = "函數(shù)名"，兩種寫法任選其一，效果一致。
3 鍵盤事件
3.1 Vue中常用的按鍵別名
- 回車 => enter
- 刪除 => delete
- 退出 => esc
- 空格 => space
- 換行 => tab
- 上 => up
- 下 => down
- 左 => left
- 右 => right
Vue當(dāng)中未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線命名）
3.2 最簡單的綁定鍵盤事件的方法
鍵盤事件常用的有兩個：keydown（鍵盤按下時執(zhí)行）和keyup（鍵盤按下后彈起時執(zhí)行）
綁定鍵盤事件的寫法為@keyup="函數(shù)名"（v-on:keyup="函數(shù)名"），可參照以下代碼。
每一個按鍵都有自己的名字與編碼，以下代碼執(zhí)行的是 在按下任意鍵之后，控制臺顯示該按鍵的按鍵名（key）與按鍵編碼（keyCode）。keyCode在web標(biāo)準(zhǔn)中已經(jīng)被廢棄
<body>
<div class="btns">
<input type="text" @keyup="keyEvent">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods: {
keyEvent(event) {
console.log(event.key,event.keyCode);
}
}
})
vm.$mount('.btns')
</script>
</body>以下例舉幾個按鍵：
注意：這里輸出的結(jié)果開頭大寫，并非vue當(dāng)中所提供的別名，vue提供的別名一般用在形如@keyup.enter=“函數(shù)名” 上，后面會有詳細描述。
3.3 按下目標(biāo)鍵才觸發(fā)的鍵盤事件
假如現(xiàn)在有一個input標(biāo)簽，在input標(biāo)簽中輸入內(nèi)容，輸入完畢后，只有按回車鍵才能將輸入的內(nèi)容顯示在控制臺。有兩種實現(xiàn)方法：
第一種：使用if進行原始的按鍵判斷方法
<body>
<div class="btns">
<input type="text" @keyup="keyEvent">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods: {
keyEvent(event) {
if (event.key == 'Enter') {
console.log(event.target.value);
}
}
}
})
vm.$mount('.btns')
</script>
</body>第二種：使用vue提供的按鍵判斷（要用到vue提供的別名），只需在@keyup后添加別名即可。
<body>
<div class="btns">
<input type="text" @keyup.enter="keyEvent">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
methods: {
keyEvent(event) {
console.log(event.target.value);
}
}
})
vm.$mount('.btns')
</script>
</body>但是有一類按鍵比較特殊，這類按鍵由多個單詞組成，例如CapsLock（大小寫切換），它由Caps與Lock組成，寫在@keyup后面就應(yīng)該這樣寫：
@keyup.caps-lock="函數(shù)名"
即：將兩個單詞拆分開用短橫線連接，并且將大寫字母變?yōu)樾憽?/p>
另外一個需要注意的點是，部分按鍵無法進行鍵盤事件的綁定，例如音量鍵、亮度鍵等。
3.4 tab按鍵(特殊)
tab按鍵自身就有一個功能，就是把焦點從當(dāng)前元素身上移到另一個元素身上。tab鍵在按下但還沒有抬起來時就已經(jīng)被觸發(fā)，所以@keyup對tab鍵無效，需要使用@keydown來控制tab鍵。
3.5 系統(tǒng)修飾鍵(特殊)
系統(tǒng)修飾鍵（用法特殊）：ctrl、shift、alt、meta(也叫徽標(biāo)鍵或win鍵)。
以上按鍵需要配合keydowm按鍵才能正常的觸發(fā)鍵盤事件。若配合keyup按鍵，則需要再按下修飾鍵的同時再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
若規(guī)定只能按下ctrl+y才能觸發(fā)鍵盤事件，應(yīng)該怎么寫？
答案：@keyup.ctrl.y = "函數(shù)名"
3.6 自定義按鍵別名
例如將回車鍵的別名由enter改為huiche需要怎么改？
寫法如下：
vue.config.keyCodes.huiche = 13;
數(shù)字13是回車鍵的編碼。huiche是新的別名。
一般不推薦自定義按鍵名。
總結(jié)
到此這篇關(guān)于vue中的事件綁定的文章就介紹到這了,更多相關(guān)vue事件綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下2023-08-08
這篇文章主要為大家詳細介紹了vue+node+webpack環(huán)境搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue中(el-button的五種類型，三種css格式)具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細的內(nèi)容介紹，感興趣的小伙伴可以參考一下2022-07-07
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項的相關(guān)資料,需要的朋友可以參考下2022-04-04
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
props指父組件往子組件中傳入?yún)?shù)，這篇文章主要為大家介紹了vue3中props的原理與使用，文中的示例代碼講解詳細，感興趣的可以了解一下2023-05-05