Klick-Handler

Du schreibst @click seit der Einführung. Es ist die Kurzform von v-on:click, einer Direktive, so wie :src die Kurzform von v-bind:src ist. Diese beiden Buttons tun dasselbe:

<button v-on:click="tasseHinzufuegen">Noch ein Kaffee</button>
<button @click="tasseHinzufuegen">Noch ein Kaffee</button>

Alle schreiben die Kurzform. Nach dem @ kommt der Name des Ereignisses, und in den Anführungszeichen steht, was Vue tun soll, wenn es eintritt. Das kann der Name einer Funktion aus dem Skript sein, wie bisher, oder eine kurze Anweisung, die Vue bei jedem Klick ausführt (mit const tassen = ref(0); im Skript):

<template>
    <p>Tassen heute: {{ tassen }}</p>
    <button @click="tassen++">Noch ein Kaffee</button>
    <button @click="tassen = 0">Neuer Tag</button>
</template>

In der Vorlage brauchen Refs kein .value, deshalb ist tassen++ hier richtig, auch wenn es im Skript ein Fehler wäre. Eine solche Anweisung ist praktisch für Kleinigkeiten: 1 addieren, einen Wert setzen oder mit ! zwischen true und false umschalten, wie in @click="geoeffnet = !geoeffnet".

Wann ist eine Funktion besser? Wenn ein Klick mehr als eine Sache tut, wenn er ein if braucht oder wenn mehrere Buttons dasselbe tun. In ein Attribut gequetschte Anweisungen sind schwer zu lesen, und die Logik deiner App gehört ins Skript. Eine gute Regel: Eine kurze Anweisung darf in die Vorlage, alles Längere kommt in eine Funktion.