Какие модификаторы событий предоставляет vue?vue-18

Vue предоставляет мощную систему модификаторов событий, которые позволяют решать распространенные задачи обработки событий декларативным способом прямо в шаблоне. Рассмотрим все виды модификаторов.

1. Основные модификаторы событий

Модификаторы DOM-событий:

<!-- Прекращает всплытие события -->
<a @click.stop="handleClick">Stop Propagation</a>

<!-- Отменяет действие по умолчанию -->
<form @submit.prevent="onSubmit">Prevent Default</form>

<!-- Комбинация модификаторов -->
<form @submit.stop.prevent="onSubmit">Stop + Prevent</form>

<!-- Событие сработает только один раз -->
<button @click.once="handleOnceClick">Once</button>

<!-- Режим обработки события на фазе capture -->
<div @click.capture="handleCaptureClick">Capture</div>

<!-- Срабатывает только если event.target - сам элемент -->
<div @click.self="handleSelfClick">Self</div>

<!-- Passive mode для touch/wheel событий -->
<div @touchmove.passive="onTouchMove">Passive</div>

2. Модификаторы клавиш

Клавиши по кодам:

<input @keyup.enter="submit" />
<input @keyup.13="submit" /> <!-- Альтернатива через код -->

Системные модификаторы:

<input @keyup.ctrl="onCtrlUp" />
<input @keyup.alt="onAltUp" />
<input @keyup.shift="onShiftUp" />
<input @keyup.meta="onMetaUp" /> <!-- cmd на Mac -->

Комбинации клавиш:

<input @keyup.ctrl.enter="onCtrlEnter" />
<input @keyup.exact="onExact" /> <!-- Только эта клавиша -->

Часто используемые клавиши:

<input @keyup.esc="cancel" />
<input @keyup.space="playPause" />
<input @keyup.tab="nextField" />
<input @keyup.delete="removeItem" />

3. Модификаторы мыши

<button @click.left="leftClick">Левая кнопка (по умолчанию)</button>
<button @click.middle="middleClick">Средняя кнопка</button>
<button @click.right="rightClick">Правая кнопка</button>

4. Модификаторы для v-model

Для полей ввода:

<input v-model.lazy="msg" /> <!-- Обновляет после change -->
<input v-model.number="age" /> <!-- Приводит к числу -->
<input v-model.trim="name" /> <!-- Удаляет пробелы -->

5. Кастомные модификаторы

Вы можете создавать собственные модификаторы через глобальные конфигурации:

Vue.config.keyCodes = {
  f1: 112,
  up: [38, 87] // w или стрелка вверх
}

<input @keyup.f1="help" />
<input @keyup.up="moveUp" />

6. Цепочки модификаторов

Модификаторы можно комбинировать:

<button @click.stop.prevent.self="doThat"></button>
<!-- Порядок имеет значение! -->

Резюмируем

Vue предоставляет следующие группы модификаторов: ✔ Базовые: .stop, .prevent, .capture, .self, .once, .passive
✔ Клавиатурные: .enter, .tab, .esc, .space, .up, .down и др.
✔ Системные: .ctrl, .alt, .shift, .meta
✔ Мыши: .left, .right, .middle
✔ v-model: .lazy, .number, .trim
✔ Кастомные: можно определить свои

Правила использования:

  1. Порядок модификаторов в цепочке влияет на результат
  2. .exact контролирует точные комбинации клавиш
  3. Для touch-событий рекомендуется .passive для производительности
  4. Модификаторы клавиш также работают с @keydown и @keypress

Модификаторы событий — мощный инструмент Vue, позволяющий сохранять шаблоны чистыми и лаконичными, вынося общую логику обработки событий в декларативные конструкции.

Вопросы

Собеседования