Ввод, клавиши и мышь

После @ может стоять любое событие, которое вы знаете по addEventListener, с тем же названием: @input, @keydown, @mouseover и так далее.

Ввод текста. Текстовое поле получает событие input после каждого изменения текста. Обработчик читает текст из объекта события, event.target.value, и хранит его в рефе:

<script setup>
import { ref } from "vue";

const name = ref("");

function updateName(event) {
    name.value = event.target.value;
}
</script>

<template>
    <input :value="name" @input="updateName">
    <p>Привет, {{ name }}!</p>
</template>

Абзац меняется с каждой набранной буквой. :value="name" работает в обратную сторону: кладёт реф в поле, поэтому когда скрипт меняет name.value, скажем, на "", поле тоже меняется. В уроке «Формы» вы познакомитесь с v-model, который делает и то и другое сразу.

Клавиши. @keydown срабатывает при каждой нажатой клавише. Чтобы реагировать только на Enter, добавьте модификатор .enter: @keydown.enter="send". Тогда Vue вызывает send только при нажатии Enter, и if (event.key === "Enter") не нужен. Есть и другие модификаторы, например .esc для Escape и .space для пробела.

Мышь. @mouseover срабатывает, когда указатель мыши заходит на элемент, а @mouseleave — когда уходит с него. Вместе они позволяют показывать что-то, пока указатель находится над элементом (в скрипте при этом есть const hint = ref(false);):

<template>
    <p @mouseover="hint = true" @mouseleave="hint = false">Морковный торт</p>
    <p>{{ hint ? "С грецкими орехами." : "" }}</p>
</template>