Ответ
Модификатор на событие (event modifier) — это специальный синтаксис в фреймворках (например, Vue.js), который изменяет поведение обработчика события. Он позволяет добавлять дополнительные условия или действия без явного написания кода в обработчике.
Примеры модификаторов в Vue:
<!-- Остановить всплытие события -->
<button @click.stop="handleClick">Click</button>
<!-- Предотвратить действие по умолчанию -->
<form @submit.prevent="onSubmit"></form>
<!-- Только при нажатии Enter -->
<input @keyup.enter="submitForm">Распространённые модификаторы:
.stop—event.stopPropagation().prevent—event.preventDefault().self— срабатывает только если событие произошло на самом элементе.once— событие сработает только один раз.capture— обработчик в фазе capture.passive— улучшает производительность для скролла
Модификаторы можно комбинировать: @click.stop.prevent
Ответ 18+ 🔞
А, слушай, про эти ваши модификаторы на события! Ну, это ж такая штука, чтобы не городить в коде овердохуища проверок на каждый чих. Представь, сидишь ты, пишешь обработчик, а там надо и всплытие остановить, и действие браузера отменить, и ещё хуй знает что. Так вот, чтобы не писать в каждом методе эту муть с event.stopPropagation() и event.preventDefault(), придумали эти самые модификаторы. Красота же, ёпта!
Смотри, как это выглядит на практике. Вот тебе кнопка:
<button @click.stop="handleClick">Жми сюда</button>Видишь этот .stop? Это он и есть, модификатор. Он автоматом, блядь, вызывает event.stopPropagation(). То есть событие дальше по дереву не поползёт, наверх, к родителям. Удобно? Удобно!
А вот форма, классика жанра:
<form @submit.prevent="onSubmit"></form>Тут .prevent — это наш спаситель. Он говорит браузеру: «Слышь, мудила, не перезагружай страницу, я сам всё обработаю!». Вызывает event.preventDefault(), и всё, ты царь и бог.
А бывает, нужно чтобы событие сработало только раз, и всё, нахуй. Например, отправил данные — и хватит, чтобы юзер не долбил кнопку как дурак. Для этого .once:
<button @click.once="sendData">Отправить один раз</button>После первого клика обработчик отвалится, и всё, можешь тыкать дальше, хоть обоссысь — ничего не произойдёт. Гениально, правда?
Ещё есть .self — хитрая жопа. Сработает только если кликнули именно по этому элементу, а не по его детям. Или .capture — ловит событие на фазе захвата, а не всплытия. Ну и .passive — для скролла, чтобы не тормозило, когда слушаешь touch-события. Производительность, блядь, улучшает!
Их ещё можно в кучу собирать, как лего:
<a @click.stop.prevent="doSomething">Ссылка</a>Тут и всплытие остановится, и переход по ссылке не произойдёт. Всё в одной строчке, без лишнего кода. Красота, в рот меня чих-пых!
Короче, модификаторы — это как специи на кухне. Без них можно, но с ними — вкуснее и быстрее. Не надо изобретать велосипед, когда можно просто добавить .stop.prevent и жить спокойно.