Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке key modifiers?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Key modifiers (модифікатори клавіш)** - це спеціальні модифікатори для директиви `v-on`, які дозволяють виконувати обробник **лише при натисканні конкретної клавіші чи їх комбінації**. Вони використовуються з подіями `keyup` і `keydown`. **Ключове:** key modifiers дозволяють реагувати лише на потрібні клавіші (наприклад Enter, Escape, стрілки, Tab) без ручної перевірки `event.key` у коді.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Key modifiers (модифікатори клавіш)** - це спеціальні модифікатори для директиви `v-on`, які дозволяють виконувати обробник **лише при натисканні конкретної клавіші чи їх комбінації**. Вони використовуються з подіями `keyup` і `keydown`. Простіше кажучи: > **Key modifiers дозволяють реагувати лише на потрібні клавіші (наприклад Enter, Escape, стрілки, Tab), без ручної перевірки** `event.key` **у коді.** --- ## Найпростіший приклад ```html <input @keyup.enter="sendMessage"> ``` Обробник викличеться **лише**, якщо користувач натисне Enter. Без модифікаторів довелося б писати: ```js 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`)Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.