Директива v-on во Vue используется для обработки событий, возникающих на элементах DOM. Она позволяет привязывать слушатели к нативным событиям браузера (таким как click, submit, input, keyup и т.д.) или к кастомным событиям компонентов. Это мощный инструмент, позволяющий реагировать на действия пользователя и связывать их с методами Vue-компонента.

Синтаксис

Базовая форма:

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

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

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

Как это работает

Когда вы используете v-on:event="methodName", Vue:

1. Находит элемент в DOM.

2. Добавляет обработчик события event.

3. При срабатывании события вызывает метод methodName из объекта methods текущего компонента.

4. Контекст внутри метода будет ссылаться на экземпляр компонента (this указывает на компонент).

Пример:

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

Передача параметров

Вы можете передать аргументы в метод:

<button @click="sayHello('Мир')">Привет</button>
methods: {
sayHello(name) {
console.log('Привет, ' + name);
}
}

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

<button @click="handleClick('аргумент', $event)">Нажми</button>
methods: {
handleClick(arg, event) {
console.log(arg, event.type);
}
}

Модификаторы

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

.prevent

Вызывает event.preventDefault(). Часто используется в формах:

<form @submit.prevent="onSubmit">...</form>

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

.stop

Вызывает event.stopPropagation() — предотвращает всплытие события:

<div @click="parentClick">
<button @click.stop="childClick">Нажми</button>
</div>

Клик по кнопке вызовет только childClick, но не parentClick.

.once

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

<button @click.once="doSomething">Один раз</button>

.capture

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

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

.self

Срабатывает только если событие пришло от самого элемента, а не от его потомков:

<div @click.self="handleSelfClick">Нажми только сюда</div>

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

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

<button @click.stop.prevent="doAction">...</button>

Это остановит всплытие и отменит стандартное поведение.

Привязка к клавишам

Vue позволяет использовать модификаторы клавиш:

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

Доступны:

• .enter

• .tab

• .esc

• .space

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

• .delete

• и др.

Можно комбинировать с ctrl, alt, shift, meta:

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

v-on с аргументом — динамическое имя события

Можно использовать динамические события:

<button v-on:\[eventName\]="doSomething">Нажми</button>
data() {
return {
eventName: 'click'
}
}

Событие click будет привязано. Если eventName станет, например, 'mouseover', то обработка будет работать уже на mouseover.

v-on и компоненты

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

Компонент:

this.$emit('myEvent', data)

Родитель:

<MyComponent @myEvent="handleMyEvent" />

Обработка событий с условиями

Часто v-on комбинируется с условиями внутри методов:

<button @click="submitForm">Отправить</button>
methods: {
submitForm() {
if (this.isValid) {
// отправка
} else {
// ошибка
}
}
}

Особенности

• v-on можно использовать не только на кнопках, но и на любых элементах, включая input, form, div, li и кастомные компоненты.

• Поддерживает не только мышь и клавиатуру, но и такие события как touchstart, touchend, focus, blur, scroll, change, input и другие.

• Используется также для работы с компонентами через v-on:$emit.

Директива v-on — один из ключевых инструментов реактивного взаимодействия во Vue. Она объединяет шаблон и бизнес-логику, позволяя создавать интерактивные интерфейсы с минимальными усилиями.