簡介

vue事件監聽通過v-on指令配置在HTML中，相當于原生的addEventListener。所有的vue事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上，采v-on指令有如下好處：
1）通過查看HTML模板便能輕松定位對應的方法
2）ViewModell和DOM完全解耦，易于測試
3）當一個ViewModel被銷毀，所有的事件處理器都會自動刪除

如何綁定

內聯方式：

//綁定單擊事件處理器click <div v-on:click="greet">點擊問候</div> //簡寫 <div @click="greet">點擊問候</div>

內聯方式下一個事件處理器只能綁定一個方法，若需要綁定多個方法，只能通過原生addEventListener方法來綁定。

methods配置

用戶綁定的事件需要在vue實例中進行定義，所有定義的方法都放在methods屬性下

var vm = new Vue({el: '#app',methods: {greet() {console.log(’hello‘)；}} }) // 也可以在javascript中調用 vm.greet();

需要注意的地方：
1）methods中定義的方法內的this始終指向創建的vue實例
2）與事件綁定的方法支持參數event即原生DOM事件的傳入
3）方法用在普通元素上時，只能監聽原生DOM事件；用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件

$events

vue中創建的方法需要訪問原生DOM事件時可以直接傳入event來獲取。在內聯語句處理器中需要訪問原生DOM事件時，可以用一個特殊變量$event將其傳入方法中。

<div @click="greet('hello', $event)"></div>methods: {greet(msg, event) {event.preventDefault(); // 我們可以通過event訪問原生事件對象} }

事件修飾符

vue事件修飾符是以半角句號（.）開始的特俗后綴。
vue為v-on提供了四個修飾符（.prevent\ .stop \ .capture\ .self）+按鍵修飾符

• prevent：用于阻止事件的默認行為，使之在HTML中便能完成操作

//使提交事件不再重載頁面 <form @submit:prevent="onSubmit"></form>

• stop ：用于阻止事件冒泡

//阻止單擊事件冒泡 <div @click.stop="deThis"></div>

• capture：表示添加事件偵聽器時采用捕獲模式

<div @click.capture="doThis"></div>

• self：當事件在該元素本身而非子元素觸發時 觸發回調

<div @click.self="doThis"></div>

• 按鍵：監聽鍵盤事件

<input @keyup.13="submit"></div> //同上 <input @keyup.enter="submit"></div>

完整的按鍵別名如下：
.enter(13)
.tab(9)
.delete(46)
.esc(27)
.space(32)
.up(38)
.down(40)
.left(37)
.right(39)

多重指令寫法

//1.0 <div @click="handleClick" @keyup="handleKeyUp" @keydown="handleKeyDown"></div>

總結

以上是生活随笔為你收集整理的vue Method 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。