Psaní, klávesy a myš

Za @ může být jakákoli událost, kterou znáte z addEventListener, se stejným názvem: @input, @keydown, @mouseover a tak dál.

Psaní. Textové pole dostane událost input po každé změně svého textu. Obsluha text přečte z objektu události, event.target.value, a uloží ho do refu:

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

const jmeno = ref("");

function zmenJmeno(event) {
    jmeno.value = event.target.value;
}
</script>

<template>
    <input :value="jmeno" @input="zmenJmeno">
    <p>Dobrý den, {{ jmeno }}!</p>
</template>

Odstavec se mění s každým napsaným písmenem. :value="jmeno" funguje opačným směrem: dá ref do textového pole, takže když skript změní jmeno.value, třeba na "", změní se i textové pole. V lekci Formuláře poznáte v-model, který obojí udělá najednou.

Klávesy. @keydown přijde při každém stisku klávesy. Abyste reagovali jen na Enter, přidejte modifikátor .enter: @keydown.enter="odesli". Vue pak zavolá odesli, jen když je to Enter, takže nepotřebujete if (event.key === "Enter"). Jsou i další, třeba .esc pro Escape a .space pro mezerník.

Myš. @mouseover přijde, když ukazatel myši najede na prvek, a @mouseleave, když z něj odjede. Spolu můžou něco ukázat, dokud je ukazatel nad prvkem (ve skriptu je const tip = ref(false);):

<template>
    <p @mouseover="tip = true" @mouseleave="tip = false">Mrkvový dort</p>
    <p>{{ tip ? "Obsahuje vlašské ořechy." : "" }}</p>
</template>