0Pricing
Vue Academy · Урок

Модификаторы событий v-on

.stop, .prevent, .self, .once, .capture, .passive — когда и зачем использовать каждый модификатор

«Модификаторы событий v-on» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Более чистая обработка событий

Директива v-on (сокращённая запись @) добавляет обработчики событий. Модификаторы событий выполняют распространённые операции с DOM, например останавливают распространение события или отменяют действия по умолчанию, поэтому обработчики могут сосредоточиться на логике.

Какие проблемы решают модификаторы

Без модификаторов в обработчиках приходится добавлять шаблонный код для DOM: вызывать event.preventDefault() или event.stopPropagation(). Модификаторы переносят это в декларативный шаблон.

.stop для stopPropagation

.stop останавливает всплытие события к родительским элементам — это эквивалентно вызову event.stopPropagation().

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent для preventDefault

.prevent вызывает event.preventDefault(). Классический вариант использования — не дать форме перезагрузить страницу при отправке.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

Комбинирование модификаторов

Вы можете комбинировать модификаторы. Порядок важен — они применяются слева направо.

<a @click.stop.prevent="onClick">Link</a>

.self: только сам элемент

.self запускает обработчик только в том случае, если целью события является сам элемент, а не дочерний элемент, от которого событие всплыло. Особенно полезно для фонов наложений.

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

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

Для событий клавиатуры можно отслеживать определённые клавиши. @keyup.enter срабатывает только при отпускании клавиши Enter.

<input @keyup.enter="search" />

Другие модификаторы клавиш

Vue предоставляет псевдонимы для распространённых клавиш: .enter, .esc, .tab, .delete, .space, а также для клавиш со стрелками, например .up и .down.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: запуск обработчика только один раз

.once запускает обработчик не более одного раза, а затем удаляет слушатель. Это полезно для однократных действий, например закрытия приветственного сообщения.

<button @click.once="initialize">Start</button>

.passive для повышения производительности прокрутки

.passive сообщает браузеру, что обработчик не будет вызывать preventDefault(). Благодаря этому браузер может плавно прокручивать страницу без ожидания, что повышает производительность при сенсорных событиях и прокрутке.

<div @scroll.passive="onScroll">...</div>

Выбор подходящего модификатора

  • .stop — остановить всплытие.
  • .prevent — заблокировать действие по умолчанию.
  • .self — игнорировать события, всплывшие от дочерних элементов.
  • .once — выполнить один раз.
  • .passive — никогда не отменять действие по умолчанию; повысить производительность прокрутки.

Примечание: никогда не объединяйте .passive с .prevent — они противоречат друг другу.

Быстрая проверка

Выберите подходящий модификатор.

Итоги

Модификаторы событий помогают сохранять обработчики чистыми:

  • .stop = stopPropagation, .prevent = preventDefault.
  • .self срабатывает только на самом элементе.
  • Модификаторы клавиш, например .enter, предназначены для определённых клавиш.
  • .once запускает обработчик один раз, а .passive повышает производительность прокрутки.

Часто задаваемые вопросы

Урок «Модификаторы событий v-on» бесплатный?

Да — полный текст урока «Модификаторы событий v-on» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Модификаторы событий v-on»?

.stop, .prevent, .self, .once, .capture, .passive — когда и зачем использовать каждый модификатор Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Модификаторы событий v-on»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. v-model: внутреннее устройство двусторонней привязки
  2. Модификаторы событий v-on
  3. Динамические и множественные привязки v-bind
  4. Написание пользовательских директив
← Назад к Vue Academy