vue.js中的事件處理器怎么用

本文小編為大家詳細介紹“vue.js中的事件處理器怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue.js中的事件處理器怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

監聽事件

可以用v-on指令監聽DOM事件來觸發一些javascript代碼。

demo:

<div v-on:click="++counter">點擊，增加1</div>
<span>{{counter}}</span>

 data:{

　　counter:0

}

方法事件處理器

許多事件處理器的邏輯都很復雜，所以直接把javaScript代碼寫在v-on指令中是不可行的。因此v-on可以接收一個定義的方法來調用

<div v-on:click="counter()">點擊，增加1</div>
<span>{{counter}}</span>

data:{

　　counter:0

},

method:{

　　counter:function(){

　　this.counter++;

　　}

}

有時也需要在內聯語句處理器中訪問原生DOM事件，可以用特殊變量$event把它傳入方法：

$event 原生事件對象

事件修飾符
在事件處理程序中調用event.preventDefault()或event.stopPropagagation()是非常常見的需求。盡管我們可以在methods中輕松實現這點，但更好的

方式是：methods只是純粹的數據邏輯，而不是去處理DOM事件的細節。

為了解決這個問題，Vue.js為v-on提供了事件修飾符，通過由（.）表示的指令后綴來調用修飾符。

.stop

.prevent

.capture

.self

.once 

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

新增

<!--點擊事件將只會觸發一次-->
<a v-on:click.once="dothis"></a>

不像其他只能對原生的DOM事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件上

按鍵修飾符
在監聽鍵盤事件時，我們經常需要監聽常見的鍵值。　　Vue允許為v-on在監聽事件時添加按鍵修飾符：

<!--只有在keyCode是13時調用vm.submit()-->
<input v-on:keyup.13="submit">

常見的按鍵還有別名：

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按鍵別名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

可以通過全局config.keyCodes對象 自定義案件修飾符別名

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1=112

按鍵修飾符  新增

可以用如下修飾符開啟鼠標或鍵盤事件監聽，使在按鍵按下時發生反應。

.ctrl

.alt

.shift

.meta 

注意：在不同系統的鍵盤上，meta對應的鍵不一樣

為什么在HTML中監聽事件
你可能注意到這種事件監聽的方式違背了關注點分離的傳統理念。不必擔心，因為所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上，它不會導致任何維護上的困難。實際上，使用v-on有幾個好處：

1 掃一眼HTML模板便能輕松定位在JavaScript代碼里對應的方法

2 因為你無須在JavaScript里手動綁定事件，你的viewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易于測試。

3 當一個ViewModel被銷毀時，所有的事件處理器都會自動被刪除，你無須擔心如何自己清理它們。

讀到這里，這篇“vue.js中的事件處理器怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。