Обработка событий: v-on

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

<button v-on:click="incrementCounter">Нажми меня</button>

В примере выше клик по кнопке вызовет метод incrementCounter, определённый в объекте methods компонента.

Сокращённая форма записи директивы:

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

Символ @ является алиасом для v-on: и используется чаще всего для краткости.

Передача данных в обработчики событий

Обработчик событий может принимать объект события, передаваемый автоматически браузером, или дополнительные аргументы:

<button @click="greet('Привет', $event)">Поздороваться</button>
methods: {
  greet(message, event) {
    console.log(message); // 'Привет'
    console.log(event.type); // 'click'
  }
}

$event представляет собой объект события, который можно использовать для доступа к его свойствам и методам.

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

Vue.js предоставляет модификаторы, которые упрощают обработку распространённых задач:

Предотвращение действия по умолчанию

<form @submit.prevent="submitForm">Отправить</form>

.prevent предотвращает стандартное поведение браузера для события, эквивалентно вызову event.preventDefault().

Прекращение всплытия события

<button @click.stop="doSomething">Клик</button>

.stop вызывает event.stopPropagation(), останавливая дальнейшее распространение события по DOM.

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

<input @keyup.enter="submitForm">

Позволяет реагировать только на определённые клавиши, такие как .enter, .esc, .tab, .delete, .arrow-up, .arrow-down.

Модификаторы для мыши и других событий

  • .capture — использование фазовой обработки capture вместо bubbling.
  • .once — обработчик будет вызван только один раз.
  • .passive — делает обработчик пассивным, например, для оптимизации прокрутки.

Пример объединения нескольких модификаторов:

<button @click.stop.prevent="handleClick">Клик с остановкой и предотвращением</button>

Обработка событий с аргументами

Для передачи дополнительных данных в метод можно использовать стрелочные функции:

<button @click="() => addItem(item.id)">Добавить</button>

Или вызвать метод с передачей события:

<button @click="addItem(item.id, $event)">Добавить</button>

Динамические события

v-on поддерживает динамическое привязывание событий через синтаксис квадратных скобок:

<button v-on:[eventName]="handleEvent">Динамический клик</button>

Здесь eventName — это переменная, содержащая имя события, например 'click' или 'mouseover'. Это полезно для компонентов, где тип события определяется во время выполнения.

Обработка событий на компонентах

Vue.js позволяет использовать v-on не только для стандартных DOM-элементов, но и для пользовательских компонентов. При этом события должны быть эмитированы компонентом:

<custom-button @clicked="handleClick"></custom-button>

Внутри компонента:

methods: {
  emitClick() {
    this.$emit('clicked');
  }
}

Метод $emit позволяет компоненту передавать события наружу с любыми аргументами:

this.$emit('update', newValue);

Делегирование событий и $event.target

Иногда требуется знать, какой конкретно элемент вызвал событие. В Vue это удобно через $event.target:

<ul>
  <li v-for="item in items" @click="selectItem($event)">{{ item.name }}</li>
</ul>
methods: {
  selectItem(event) {
    console.log(event.target.innerText);
  }
}

Интеграция с методами жизненного цикла

События могут взаимодействовать с реактивными данными компонента. Например, изменение состояния при клике:

<button @click="toggleMenu">Меню</button>
<div v-if="isMenuOpen">Содержимое меню</div>
data() {
  return {
    isMenuOpen: false
  };
},
methods: {
  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

Такой подход обеспечивает тесную связь событий и реактивного состояния, что является одной из сильных сторон Vue.js.

Итоговый обзор ключевых возможностей v-on

  • Привязка событий: стандартные и пользовательские события.
  • Сокращение записи: @ вместо v-on:.
  • Передача данных: аргументы и $event.
  • Модификаторы: .prevent, .stop, .once, .capture, .passive, клавиши.
  • Динамические события: [eventName].
  • Обработка на компонентах: $emit и пользовательские события.
  • Интеграция с реактивными данными: изменение состояния через методы.

Такой набор инструментов делает директиву v-on универсальным механизмом для организации интерактивного поведения в приложениях на Vue.js.

Оглавление