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

Базовая обработка клика

Событие click — одно из самых часто используемых событий в веб-разработке. Во Vue его можно обработать следующим образом:

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

или с использованием сокращения:

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

Метод handleClick должен быть определён в объекте methods компонента:

export default {
methods: {
handleClick() {
console.log('Кнопка нажата');
}
}
}

Что делает Vue при @click

Когда вы используете @click="handleClick", Vue:

1. Добавляет слушатель события click на элемент.

2. Когда пользователь кликает, вызывается метод handleClick с контекстом текущего компонента.

3. Вы можете использовать this внутри метода для доступа к данным и другим методам.

Передача аргументов в обработчик

Если нужно передать параметры, используется синтаксис с функцией:

<button @click="handleClick('привет')">Передать аргумент</button>
methods: {
handleClick(message) {
console.log(message); // 'привет'
}
}

Доступ к самому событию

Событие можно передать явно, используя специальное слово $event:

<button @click="handleClick($event)">Показать событие</button>
methods: {
handleClick(event) {
console.log(event.target); // элемент DOM
}
}

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

Vue предоставляет специальные модификаторы, которые позволяют изменить поведение событий.

.prevent

Вызывает event.preventDefault():

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

Без .prevent браузер перезагрузит страницу при отправке формы.

.stop

Вызывает event.stopPropagation(), чтобы остановить всплытие события:

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

Событие не дойдёт до div, если .stop используется на кнопке.

.once

Обработчик вызовется только один раз:

<button @click.once="clickOnce">Только один раз</button>

.capture

Слушатель будет работать на фазе перехвата, а не всплытия:

<div @click.capture="onCapture">...</div>

.self

Обработчик сработает только если клик был по самому элементу, а не по его дочерним:

<div @click.self="onSelfClick">Только если клик прямо сюда</div>

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

Можно использовать несколько:

<button @click.stop.prevent="doSomething">Нажми</button>

Это предотвратит действие браузера и остановит всплытие.

Привязка событий к клавишам

Vue поддерживает модификаторы клавиш для обработки событий клавиатуры:

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

Это означает: когда пользователь нажмёт Enter, вызовется submitForm.

Доступные клавиши:

• .enter

• .tab

• .delete

• .esc

• .space

• .up, .down, .left, .right

• и другие

Пример: простой счётчик

<template>
<div>
<p>Счёт: {{ count }}</p>
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>

Событие @click прямо увеличивает/уменьшает count.

Обработка событий в цикле

В v-for можно передавать аргумент, например индекс или объект:

<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ item.name }}
<button @click="removeItem(index)">Удалить</button>
</li>
</ul>
methods: {
removeItem(index) {
this.items.splice(index, 1);
}
}

Добавление событий к компоненту

Если вы используете кастомный компонент и хотите слушать события, нужно использовать v-on или @, и убедиться, что компонент испускает (emit) нужное событие:

<CustomButton @click="doSomething" />

А внутри компонента CustomButton:

this.$emit('click')

Обработка событий на нативных HTML-элементах внутри компонентов

Если ваш компонент оборачивает нативный элемент (например, button), и вы хотите слушать его события снаружи, используйте .native:

<MyButton @click.native="handleClick" />

В Vue 3 подход изменился: теперь нужно явно проксировать события через emits.

Обработка событий мыши и клавиш с дополнительной логикой

Vue также поддерживает модификаторы для событий мыши:

<button @click.right="onRightClick">ПКМ</button>

• .right — правая кнопка мыши

• .middle — колесико

И комбинации клавиш:

<input @keyup.ctrl.enter="sendMessage" />

Работает как if (event.ctrlKey && event.key === 'Enter').

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

Компонент A вызывает событие:

this.$emit('submit')

Компонент B использует A и обрабатывает:

<ComponentA @submit="handleSubmit" />

Vue автоматически связывает событие компонента с методом родителя.

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