👩‍💻 События во Vue.js 3 Что такое события? Событие — это действие, которое происходит внутри браузера или приложения, например, нажатие кнопки, ввод текста или перемещение курсора мыши. Vue.js предоставляет удобный механизм для отслеживания таких событий и выполнения соответствующих действий при их возникновении.

Основные события

1. Нажатие кнопок (click) 2. Ввод текста (input, change) 3. Перемещение мыши (mousemove, mousedown, mouseup) 4. Прокрутка страницы (scroll) 5. Фокусировка элементов (focus, blur) 6. Клавиатурные события (keydown, keyup)

Как привязать событие к элементу? Для того чтобы обработать какое-либо событие, нужно использовать директиву v-on (или её сокращённую версию @). Давайте посмотрим, как это работает на примере: `Нажми меня

export default { methods: { handleClick() { alert('Кнопка нажата!'); } } }

Здесь мы используем директиву @click, чтобы вызвать метод handleClick при каждом клике по кнопке.

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

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

• .stop: предотвращает всплытие события вверх по дереву DOM.
• .prevent: отменяет стандартное поведение элемента (например, переход по ссылке).
• .self: срабатывает только если событие произошло непосредственно на целевом элементе, а не на его потомках.
• .once: вызывает обработчик только один раз.

Пример использования модификаторов: `Ссылка Клавиатурные события

Работа с клавиатурными событиями может быть особенно полезной при создании интерактивных приложений. Vue.js позволяет указывать конкретные клавиши для обработки: `Здесь обработчик будет вызван только тогда, когда пользователь нажмет клавишу Enter после ввода текста.

Вложенные компоненты и события

Когда у вас есть вложенные компоненты, вы можете передавать события от дочернего компонента к родительскому с помощью механизма событий. Для этого используется директива $emit.

Пример передачи события от дочернего компонента: `Отправить событие

И обработка этого события в родительском компоненте: `import ChildComponent from './ChildComponent.vue';

export default { components: { ChildComponent }, methods: { handleCustomEvent() { console.log('Получено событие от дочернего компонента'); } } }`````