Когда мы создаём интерактивное приложение, важно уметь отслеживать действия пользователя: клики, нажатия клавиш, движения мыши и другие события. Именно обработка этих событий позволяет вашему приложению реагировать на пользователя, делая интерфейс живым и динамичным. В этой статье мы подробно рассмотрим, как работать с событиями в Vue 3, используя Composition API.

Основы: директива v-on или просто @

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

Пример базового события клика:

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

<script setup>
const handleClick = () => {
  alert('Кнопка нажата!');
};
</script>

Когда пользователь нажимает на кнопку, вызывается функция handleClick, которая выводит стандартное сообщение с помощью alert. Этот код является основой обработки событий, и вы будете часто сталкиваться с подобной записью.

Передача параметров в обработчик

Иногда возникает потребность передать в обработчик событие или какие-то дополнительные данные. Сделать это в Vue 3 довольно просто:

<template>
  <button @click="handleClick('Привет')">Нажми меня</button>
</template>

<script setup>
const handleClick = (message) => {
  alert(message);
};
</script>

В данном случае в обработчик handleClick передаётся строка ‘Привет’, которая и будет отображена в alert.

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

<template>
  <button @click="handleClick($event)">Нажми меня</button>
</template>

<script setup>
const handleClick = (event) => {
  console.log(event);
};
</script>

Теперь в консоли браузера вы увидите объект события, содержащий всю информацию о клике: координаты, целевой элемент и т.д.

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

Vue.js предоставляет несколько полезных модификаторов для обработки событий. Эти модификаторы позволяют изменять поведение стандартных событий. Рассмотрим наиболее популярные из них.

.prevent

Этот модификатор предотвращает стандартное поведение элемента. Например, ссылки по умолчанию перезагружают страницу, но с помощью .prevent можно это остановить:

<template>
  <a href="#" @click.prevent="handleClick">Не перезагружать страницу</a>
</template>

<script setup>
const handleClick = () => {
  console.log('Страница не перезагрузилась!');
};
</script>

Теперь, даже если пользователь нажмёт на ссылку, страница не будет перезагружена.

.stop

Модификатор .stop предотвращает всплытие события. Если у вас есть вложенные элементы, и вы не хотите, чтобы событие дошло до родителя, используйте этот модификатор:

<template>
  <div @click="handleParentClick">
    <button @click.stop="handleButtonClick">Нажми меня</button>
  </div>
</template>

<script setup>
const handleParentClick = () => {
  console.log('Клик на родителе');
};

const handleButtonClick = () => {
  console.log('Клик на кнопке');
};
</script>

В этом примере клик по кнопке вызовет только handleButtonClick, но событие не дойдёт до элемента <div>, потому что мы остановили его с помощью .stop.

.once

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

<template>
  <button @click.once="handleClick">Кликни один раз</button>
</template>

<script setup>
const handleClick = () => {
  console.log('Кнопка была нажата');
};
</script>

Теперь обработчик сработает только при первом клике, и последующие нажатия на кнопку будут игнорироваться.

.self

Этот модификатор позволяет отлавливать событие только на конкретном элементе, предотвращая его срабатывание при клике на вложенные элементы:

<template>
  <div @click.self="handleClick">
    <p>Кликни сюда</p>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('Клик был сделан на div, не на его дочерних элементах');
};
</script>

Теперь клик по <p> не вызовет обработчик, потому что событие будет отслеживаться только на элементе <div>.

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

Vue также позволяет комбинировать несколько модификаторов. Например, если вы хотите, чтобы клик на ссылке не перезагружал страницу и событие обрабатывалось только один раз:

<template>
  <a href="#" @click.prevent.once="handleClick">Однократная ссылка</a>
</template>

<script setup>
const handleClick = () => {
  console.log('Ссылка была нажата один раз');
};
</script>

Эта ссылка сработает только при первом клике и не вызовет перезагрузку страницы.

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

Vue позволяет легко отслеживать события клавиатуры с помощью директивы @keydown, @keyup и других. Вы можете отлавливать как конкретные клавиши, так и сочетания.

Пример отслеживания нажатия на клавишу Enter:

<template>
  <input @keyup.enter="handleEnter" placeholder="Нажми Enter">
</template>

<script setup>
const handleEnter = () => {
  console.log('Нажата клавиша Enter');
};
</script>

Vue также поддерживает модификаторы для клавиш, таких как ctrl, alt, shift и другие:

<template>
  <input @keyup.ctrl.enter="handleCtrlEnter" placeholder="Нажми Ctrl + Enter">
</template>

<script setup>
const handleCtrlEnter = () => {
  console.log('Нажата комбинация Ctrl + Enter');
};
</script>

Теперь обработчик сработает только при нажатии комбинации клавиш Ctrl + Enter.

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

Иногда возникает необходимость привязать несколько функций к одному событию. В Vue это можно сделать легко:

<template>
  <button @click="firstHandler; secondHandler">Нажми меня</button>
</template>

<script setup>
const firstHandler = () => {
  console.log('Первый обработчик');
};

const secondHandler = () => {
  console.log('Второй обработчик');
};
</script>

Оба обработчика будут выполнены по очереди при одном событии клика.

Заключение

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

Дальше нас ждёт работа с формами — ещё один важный элемент, который поможет нам взаимодействовать с пользователем.