Tippen, Tasten und die Maus

Nach dem @ kann jedes Ereignis stehen, das du von addEventListener kennst, mit demselben Namen: @input, @keydown, @mouseover und so weiter.

Tippen. Ein Textfeld bekommt nach jeder Änderung seines Textes das Ereignis input. Sein Handler liest den Text aus dem Ereignisobjekt, event.target.value, und speichert ihn in einer Ref:

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

const name = ref("");

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

<template>
    <input :value="name" @input="nameAktualisieren">
    <p>Hallo, {{ name }}!</p>
</template>

Der Absatz ändert sich mit jedem getippten Buchstaben. :value="name" geht den anderen Weg: Es legt die Ref in das Feld, wenn das Skript also name.value ändert, etwa zu "", ändert sich auch das Feld. In der Lektion Formulare lernst du v-model kennen, das beides in einem Zug erledigt.

Tasten. @keydown kommt bei jeder gedrückten Taste. Um nur auf die Eingabetaste zu reagieren, füge den Modifikator .enter hinzu: @keydown.enter="senden". Vue ruft senden dann nur auf, wenn die Taste Enter ist, du brauchst also kein if (event.key === "Enter"). Es gibt weitere, etwa .esc für Escape und .space für die Leertaste.

Die Maus. @mouseover kommt, wenn der Mauszeiger auf ein Element wandert, und @mouseleave, wenn er das Element verlässt. Zusammen können sie etwas zeigen, solange der Zeiger über einem Element ist (mit const hinweis = ref(false); im Skript):

<template>
    <p @mouseover="hinweis = true" @mouseleave="hinweis = false">Karottenkuchen</p>
    <p>{{ hinweis ? "Mit Walnüssen gebacken." : "" }}</p>
</template>