Click Handlers

You've been writing @click since the introduction. It's short for v-on:click, a directive, just as :src is short for v-bind:src. These two buttons do the same:

<button v-on:click="addCup">One more coffee</button>
<button @click="addCup">One more coffee</button>

Everyone writes the short form. After the @ comes the name of the event, and in the quotes what Vue should do when it happens. That can be the name of a function from the script, as so far, or a short statement, which Vue runs on each click (with const cups = ref(0); in the script):

<template>
    <p>Cups today: {{ cups }}</p>
    <button @click="cups++">One more coffee</button>
    <button @click="cups = 0">New day</button>
</template>

In the template, refs don't need .value, so cups++ is right here, even though it would be a mistake in the script. A statement like this is handy for small things: adding 1, setting a value, or switching true and false with !, as in @click="open = !open".

When is a function better? When a click does more than one thing, when it needs an if, or when several buttons do the same. Statements squeezed into an attribute are hard to read, and the script is where the logic of your app belongs. A good rule: one short statement can go in the template, anything longer goes into a function.