As diretivas são atributos especiais que começam com v- e dão superpoderes ao HTML do template. Com elas, ligamos variáveis a atributos, ouvimos eventos, mostramos elementos de acordo com condições e repetimos elementos para cada item de uma lista.

v-bind e o atalho :

O {{ }} funciona no texto. Para colocar uma variável em um atributo, use v-bind:

<script setup>
const image = 'https://exemplo.com/gumball.png';
const name = 'Gumball';
</script>

<template>
    <img v-bind:src="image" v-bind:alt="name" />
    <img :src="image" :alt="name" />
</template>

As duas linhas são iguais: o : é o atalho de v-bind:. No dia a dia, usamos quase sempre o atalho.

<aside> ⚠️ Isto não funciona, porque o Vue não interpreta {{ }} dentro de atributos: <img src="{{ image }}" />

</aside>

O conteúdo entre aspas de um atributo com : é JavaScript. Por isso, dá até para montar textos com template literal:

<a :href="`/characters/${id}`">Ver detalhes</a>

Classes e estilos dinâmicos

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

const isActive = ref(true);
const color = '#ff7a1a';
</script>

<template>
    <button class="chip" :class="{ 'is-active': isActive }">Todos</button>
    <div :style="{ backgroundColor: color }">Laranja</div>
</template>

:class com objeto: { 'is-active': isActive } significa "aplica a classe is-active se isActive for verdadeiro";
class e :class juntos: a classe fixa (chip) continua, e a dinâmica é somada a ela;
:style com objeto: as propriedades CSS são escritas em camelCase, como backgroundColor.

v-on e o atalho @: eventos

Para reagir a ações do usuário, usamos v-on:

<script setup>
function sayHello() {
    alert('Olá!');
}
</script>

<template>
    <button v-on:click="sayHello">Clique</button>
    <button @click="sayHello">Clique</button>
</template>

O @ é o atalho de v-on:. Funciona com qualquer evento: @click, @input, @submit, @mouseenter e muitos outros.