Obsluha kliknutí

@click píšete už od úvodu. Je to zkratka pro direktivu v-on:click, stejně jako je :src zkratka pro v-bind:src. Tahle dvě tlačítka dělají totéž:

<button v-on:click="pridejSalek">Ještě jednu kávu</button>
<button @click="pridejSalek">Ještě jednu kávu</button>

Všichni píšou kratší tvar. Za @ je název události a v uvozovkách to, co má Vue udělat, když se stane. Může to být název funkce ze skriptu, jako dosud, nebo krátký příkaz, který Vue spustí při každém kliknutí (ve skriptu je const salky = ref(0);):

<template>
    <p>Šálků kávy dnes: {{ salky }}</p>
    <button @click="salky++">Ještě jednu kávu</button>
    <button @click="salky = 0">Nový den</button>
</template>

V šabloně refy nepotřebují .value, takže salky++ je tady správně, přestože ve skriptu by to byla chyba. Takový příkaz se hodí na drobnosti: přičíst 1, nastavit hodnotu nebo přepnout true a false pomocí !, třeba @click="otevreno = !otevreno".

Kdy je lepší funkce? Když kliknutí dělá víc než jednu věc, když potřebuje if nebo když totéž dělá víc tlačítek. Příkazy nacpané do atributu se špatně čtou a logika aplikace patří do skriptu. Dobré pravidlo: jeden krátký příkaz může být v šabloně, cokoli delšího patří do funkce.