Що таке key modifiers?

VueJunior~1 хв читання

Key modifiers (модифікатори клавіш) - це спеціальні модифікатори для директиви v-on, які дозволяють виконувати обробник лише при натисканні конкретної клавіші чи їх комбінації.

Вони використовуються з подіями keyup і keydown.

Простіше кажучи:

Key modifiers дозволяють реагувати лише на потрібні клавіші (наприклад Enter, Escape, стрілки, Tab), без ручної перевірки event.key у коді.

Найпростіший приклад

html

<input @keyup.enter="sendMessage">

Обробник викличеться лише, якщо користувач натисне Enter.

Без модифікаторів довелося б писати:

onKeyPress(e) {
  if (e.key === 'Enter') {
    this.sendMessage()
  }
}

Основні key modifiers

Часто використовувані:

html

@keyup.enter
@keyup.esc
@keyup.tab
@keyup.space

Стрілки:

html

@keyup.up
@keyup.down
@keyup.left
@keyup.right

Видалення:

html

@keyup.delete  <!-- працює як Backspace і Delete -->

Комбінації з модифікаторами контролів

html

@keyup.ctrl.enter="submit"
@keyup.shift.tab="backward"
@keyup.alt.s="save"

Працює завдяки тому, що Vue перевіряє:

event.ctrlKey
event.shiftKey
event.altKey
event.metaKey (Cmd на Mac)

Корисний кейс: відправлення форми по Enter

html

<input @keyup.enter="submitForm">

Динамічний модифікатор клавіші

Можна використати обчислюване ім'я події:

html

<input v-on:[eventName]="doSomething">

Але key modifiers працюють лише з прямою вказівкою клавіші, наприклад:

html

@keyup[eventName] Не можна

Важливе (Vue 2 проти Vue 3)

У Vue 2 були keyCodes (наприклад, keyCode: 13)
У Vue 3 їх видалено, і модифікатори працюють лише через назви клавіш (enter, esc)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.