【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第20天,活動詳情檢視:2021最後一次更文挑戰

今天我們主要來學習Vue中的事件處理,給按鈕繫結各種事件並呼叫。

1. 繫結監聽

事件的基本使用:

  1. 使用 v-on:xxx@xxx 繫結事件,其中xxx是事件名;
  2. 事件的回撥需要配置在methods物件中,最終會在vm上;
  3. methods中配置的函式,不要用箭頭函式!否則this就不是vm了;
  4. methods中配置的函式,都是被Vue所管理的函式,this的指向是vm 或 元件例項物件;
  5. @click="demo"@click="demo($event)"效果一致,但後者可以傳參

javascript v-on:xxx="fun" @xxx="fun" @xxx="fun(引數)" - 事件物件 預設事件形參: event 隱含屬性物件: $event

$event 就是當前觸發事件的元素,即使不傳 $event,在回撥函式中也可以使用 event 這個引數。

```js

1. 繫結監聽

```

GIF 2021-11-20 21-47-37.gif

2. 事件修飾符

  1. prevent:阻止預設事件(常用);event.preventDefault()
  2. stop:阻止事件冒泡(常用);event.stopPropagation()
  3. once:事件只觸發一次(常用);
  4. capture:使用事件的捕獲模式;
  5. self:只有event.target是當前操作的元素時才觸發事件;
  6. passive:事件的預設行為立即執行,無需等待事件回撥執行完畢;

```html

```

GIF 2021-11-20 21-50-02.gif

3. 按鍵修飾符

  1. Vue中常用的按鍵別名:

    回車 => enter
    刪除 => delete (捕獲“刪除”和“退格”鍵)
    退出 => esc
    空格 => space
    換行 => tab (特殊,必須配合keydown去使用)
    上 => up
    下 => down
    左 => left
    右 => right
    
  2. Vue未提供別名的按鍵,可以使用按鍵原始的key值去繫結,但注意要轉為kebab-case(短橫線命名)

  3. 系統修飾鍵(用法特殊):ctrlaltshiftmeta

  4. (1). 配合keyup使用:按下修飾鍵的同時,再按下其他鍵,隨後釋放其他鍵,事件才被觸發。

  5. (2). 配合keydown使用:正常觸發事件。

  6. 也可以使用keyCode去指定具體的按鍵(不推薦)

  7. Vue.config.keyCodes.自定義鍵名 = 鍵碼,可以去定製按鍵別名

```html

```

```html

3. 按鍵修飾符

```

GIF 2021-11-20 21-52-37.gif

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」