Що таке модифікатори подій?

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

Модифікатори подій - це спеціальні суфікси (наприклад: .stop, .prevent, .once), які додаються до директиви v-on і дозволяють змінювати поведінку події без написання додаткового JavaScript-коду.

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

Модифікатори подій - це спосіб вказати Vue, як саме потрібно обробляти подію, виконуючи часто використовувані event.* дії автоматично.

Вони зроблені для зручності, чистоти шаблону і зменшення кількості шаблонного коду.

Як виглядають модифікатори подій?

html

<button @click.stop="doSomething"></button>
<button @submit.prevent="onSubmit"></button>
<input @keyup.enter="search">

Навіщо потрібні модифікатори?

Вони дозволяють:

зупинити спливання (stopPropagation)
скасувати стандартну поведінку (preventDefault)
зробити обробник одноразовим
слухати події тільки на самому елементі
працювати з клавішами
покращити продуктивність (passive)

І все це без написання зайвого коду:

html

<button @click="event.stopPropagation(); event.preventDefault(); doStuff()">...</button>

стає:

html

<button @click.stop.prevent="doStuff">

Основні модифікатори подій

1. `.stop`

Зупиняє спливання події.

html

@click.stop

Еквівалент:

event.stopPropagation()

2. `.prevent`

Скасовує стандартну поведінку браузера.

html

@submit.prevent

Еквівалент:

event.preventDefault()

3. `.once`

Обробник спрацьовує тільки один раз.

html

@click.once

Після першого виклику Vue сам видалить слухача.

4. `.self`

Спрацьовує тільки якщо подія прийшла від самого елемента, а не від дочірніх.

html

@click.self

5. `.capture`

Слухає подію на фазі capture (перед спливанням).

html

@click.capture

6. `.passive`

Створює passive-listener, корисно для scroll-обробників.

html

@scroll.passive

Підвищує продуктивність.

Модифікатори клавіш (key modifiers)

Застосовуються для keyup / keydown:

html

@keyup.enter
@keyup.esc
@keyup.space
@keyup.up
@keyup.ctrl.enter

Це теж вважається модифікаторами подій.

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

Можна комбінувати:

html

@click.stop.prevent.once="save"

Порядок має значення: Vue генерує обробник у тому порядку, в якому написані модифікатори.

Де не можна використовувати модифікатори?

Всередині компонентів для довільних custom events (вони працюють тільки з DOM-подіями та системними подіями)

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

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

Premium

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