回首Vue3之指令篇（五）

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰

這篇文章咱們來說一下v-on的使用方法，以及在使用它的時候咱們須要注意的地方。

v-on指令：綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。

修飾符

• .stop - 調用 event.stopPropagation()。
• .prevent - 調用 event.preventDefault()。
• .capture - 添加事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
• .{keyAlias} - 僅當事件是從特定鍵觸發時才觸發回調。
• .once - 只觸發一次回調。
• .left - 只當點擊鼠標左鍵時觸發。
• .right - 只當點擊鼠標右鍵時觸發。
• .middle - 只當點擊鼠標中鍵時觸發。
• .passive - { passive: true } 模式添加偵聽器

在這裏咱們須要注意的是按鍵修飾符，在下面的內容中會講到。

如何使用

對於Vue你們應該都知道v-on能夠簡寫爲@，固然你若是未接觸過，如今知道也不晚。

事件 變量event是事件類型

<button @click="doThis"></button>   ===  <button v-on:click="doThis"></button>

<button @[event]="doThis"></button>
複製代碼

從代碼中能夠看出，咱們能夠指定事件類型來綁定事件，也能夠給個變量動態的去綁定事件。

修飾符

<button @click.stop="doThis"></button>

<button @click.stop.prevent="doThis"></button>
複製代碼

從代碼中能夠看出，修飾符能夠單個使用，也能夠串聯使用（觸發每一個修飾符的功能）。

對象語法

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
                        ===
<button @mousedown="doThis" @mouseup="doThat"></button>
複製代碼

從代碼中能夠看出，咱們能夠寫一個對象語法，其等價於對象所包含的全部單個事件的集合。

假設咱們有個方法函數使變量count加1，其表達式以下：

setup() {
    const count = ref(0)
    function add() {
        count.value++
    }

    return {
        count,
        add
    }
}
複製代碼

那麼上述代碼示例中的doThis,能夠是如下場景：

1. 方法的名字，即:

<button @click="add"></button>

//若是須要傳參，又須要原生dom的數據，咱們能夠這樣作
<button @click="add(參數,$event)"></button>
複製代碼

$event能夠獲取原生DOM事件或者組件上自定義事件的數據。

2. 內聯語句,即：

<button @click="count++"></button>
複製代碼

注意事項

值得咱們注意的是：鍵盤事件與按鍵修飾符在Vue3中使用與Vue2中使用是有些差別的。

1. Vue3中不在支持使用數字 (即鍵碼) 做爲 v-on 修飾符。在Vue3的使用示例以下：

//錯誤的使用方式
<input @keyup.13="add" />

//正確的使用方式
<input @keyup.enter="add" />
複製代碼

2. Vue3中再也不支持 config.keyCodes，即自定義按鍵別名不能在被使用

Vue.config.keyCodes = {
  f1: 112
}

<input @keyup.f1="submit" />
複製代碼

上述使用方式在Vue3中是不被支持的。

3. Vue中鍵盤事件只做用在可編輯元素上，即input和textarea。若是你想做用在其餘元素上，請給元素加上屬性contenteditable 或 tabindex="number"，number爲一個數值，可設爲-一、0、1等，在使用它們的時候，可能會對你的佈局和功能產生影響，你須要根據本身的場景解決一下。

//可編輯元素
<input @keyup.enter="add" />

//非可編輯元素
<h1 @keyup.enter="add" tabindex="0">點擊</h1>
或
<h1 @keyup.enter="add" contenteditable>點擊</h1>
複製代碼

總結

1. 須要注意修飾符的使用，尤爲是按鍵修飾符

2. 須要注意鍵盤事件只做用在可編輯元素上，非可編輯元素加contenteditable 或 tabindex="number"可解決

3. Vue3中不在支持使用數字 (即鍵碼) 做爲 v-on 修飾符