Какие модификаторы событий предоставляет Vue?
Vue.js предоставляет удобные модификаторы событий, которые существенно упрощают обработку пользовательских взаимодействий. Модификаторы помогают вам избежать написания лишнего JavaScript-кода, делая ваш код чище и понятнее.
Основные модификаторы событий
<button @click.stop="handleClick">Нажми меня</button>
В этом примере, если кнопка нажата, событие
click не будет всплывать к родительским элементам.<form @submit.prevent="handleSubmit">
<input type="text" placeholder="Введите текст">
<button type="submit">Отправить</button>
</form>
Здесь выполнение отправки формы будет предотвращено, что позволяет вам обработать данные формы в
handleSubmit.<div @click.self="handleClick">
Нажми сюда, чтобы обработать клик только по этому блоку
</div>
Если клик был произведен внутрь элемента
div, события будут обработаны, но если клик произошел на дочерних элементах, обработчик не вызовется.<button @click.once="handleClick">Нажми меня только один раз</button>
После первого нажатия обработчик
handleClick будет отписан.preventDefault, что может повысить производительность при прокрутке.<div @touchmove.passive="handleTouchMove">Проведите по экрану</div>
Используя
.passive, вы сигнализируете браузеру, что не собираетесь вызывать метод preventDefault, что делает обработку событий более быстрой.Примеры использования
Существует возможность комбинирования нескольких модификаторов.
<button @click.prevent.stop="handleClick">Нажми меня</button>
В этом примере, при нажатии на кнопку сначала будет предотвращено действие по умолчанию, а затем событие click не будет всплывать.
Заключение
Модификаторы событий в Vue.js представляют собой мощный инструмент для упрощения работы с событиями. Их использование помогает избежать создания дополнительных обработчиков и делает код более чистым и читаемым. Не забудьте экспериментировать с ними в ваших проектах, и вы заметите, как они упрощают вашу работу!
Для получения более подробной информации вы можете ознакомиться с документацией Vue.js.