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

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

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

1. .stop: останавливает всплытие события.

   <button @click.stop="handleClick">Нажми меня</button>
   

   
   В этом примере, если кнопка нажата, событие click не будет всплывать к родительским элементам.
2. .prevent: предотвращает действие по умолчанию.

   <form @submit.prevent="handleSubmit">
       <input type="text" placeholder="Введите текст">
       <button type="submit">Отправить</button>
   </form>
   

   
   Здесь выполнение отправки формы будет предотвращено, что позволяет вам обработать данные формы в handleSubmit.
3. .self: событие будет обрабатываться только если оно произошло на самом элементе.

   <div @click.self="handleClick">
       Нажми сюда, чтобы обработать клик только по этому блоку
   </div>
   

   
   Если клик был произведен внутрь элемента div, события будут обработаны, но если клик произошел на дочерних элементах, обработчик не вызовется.
4. .once: событие будет обработано только один раз.

   <button @click.once="handleClick">Нажми меня только один раз</button>
   

   
   После первого нажатия обработчик handleClick будет отписан.
5. .passive: указывает, что обработчик не будет вызывать preventDefault, что может повысить производительность при прокрутке.

   <div @touchmove.passive="handleTouchMove">Проведите по экрану</div>
   

   
   Используя .passive, вы сигнализируете браузеру, что не собираетесь вызывать метод preventDefault, что делает обработку событий более быстрой.

Примеры использования

Существует возможность комбинирования нескольких модификаторов.

<button @click.prevent.stop="handleClick">Нажми меня</button>

В этом примере, при нажатии на кнопку сначала будет предотвращено действие по умолчанию, а затем событие click не будет всплывать.

Заключение

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

Для получения более подробной информации вы можете ознакомиться с документацией Vue.js.