No ecossistema do Vue.js 3, as diretivas representam atributos especiais aplicados a elementos HTML, identificados pelo prefixo v-. Elas são responsáveis por encapsular manipulações complexas do DOM e reagir a mudanças no estado da aplicação de forma declarativa. Abaixo, detalhamos as principais diretivas e suas aplicações práticas.

1. v-bind: Vinculação de Atributos

A diretiva v-bind é utilizada para sincronizar dinamicamente um atributo HTML com uma expressão ou variável do componente. Quando o valor da variável muda, o atributo é atualizado automaticamente.

<!-- Sintaxe completa -->
<img v-bind:src="fotoPerfil" alt="Avatar do Usuário">

<!-- Abreviação (shorthand) -->
<button :disabled="estaCarregando">Enviar</button>

2. v-model: Ligação Bidirecional

Essencial para formulários, o v-model cria uma conexão de mão dupla entre o valor de um elemento de entrada (input, textarea, select) e o estado do sistema. Alterações na interface refletem no código e vice-versa.

<input v-model="campoBusca" placeholder="Pesquisar...">
<p>Você está procurando por: {{ campoBusca }}</p>

3. v-on: Manipulação de Eventos

Para escutar eventos do DOM e executar lógica em resposta, utilizamos o v-on. Sua forma abreviada, o símbolo @, é amplamente adotada pela comunidade.

<!-- Executa uma função ao clicar -->
<button @click="registrarLog">Salvar Dados</button>

<!-- Modificadores de evento -->
<form @submit.prevent="submeterFormulario">...</form>

4. v-for: Renderização de Listas

O v-for itera sobre arrays ou objetos para gerar múltiplos elementos. No Vue 3, é obrigatório o uso de uma key única para otimizar o algoritmo de diffing do Virtual DOM.

<ul>
 <li v-for="tarefa in listaDeAfazeres" :key="tarefa.uid">
   {{ tarefa.descricao }}
 </li>
</ul>

5. v-if, v-else-if e v-else: Controle Condicional

Estas diretivas permitem a renderização condicional de blocos inteiros de código. O elemento só é inserido no DOM se a condição for verdadeira.

<div v-if="nivelAcesso === 'admin'">Painel Administrativo</div>
<div v-else-if="nivelAcesso === 'editor'">Painel de Edição</div>
<div v-else>Visualização Restrita</div>

6. v-show: Visibilidade via CSS

Diferente do v-if, o v-show mantém o elemento no DOM, alternando apenas a propriedade CSS display. É ideal para elementos que precisam aparecer e desaparecer frequantemente com baixo custo de performance.

<div v-show="modalAberto" class="modal">
 Conteúdo flutuante
</div>

7. v-text e v-html: Manipulação de Conteúdo

O v-text atualiza o conteúdo de texto de um elemento, enquanto o v-html renderiza strings como HTML real. Nota: use v-html apenas com conteúdo confiável para evitar ataques XSS.

<span v-text="tituloSimples"></span>
<div v-html="conteúdoFormatadoDoServidor"></div>

8. v-slot: Distribuição de Conteúdo

Utilizada em componentes para definir onde o conteúdo injetado pelo pai deve ser renderizado. Sua abreviação é o caractere #.

<PainelCustomizado>
 <template #cabecalho>
   <h2>Aviso Importante</h2>
 </template>

 <p>Corpo do texto principal.</p>
</PainelCustomizado>

9. v-pre, v-cloak e v-once: Otimização e Controle

Essas diretivas lidam com o ciclo de vida da compilação:

• v-pre: Ignora a compilação do elemento (mostra chaves {{ }} literais).
• v-cloak: Permanece no elemento até que a instância do Vue termine de compilar, útil para evitar flashes de conteúdo não estilizado.
• v-once: Renderiza o elemento apenas uma vez e ignora atualizações futuras, economizando recursos em conteúdos estáticos.

<!-- Nunca será atualizado -->
<div v-once>Valor Inicial: {{ contador }}</div>