Aula 04 – Diretivas e Renderização Condicional 🌈

Nem sempre queremos mostrar tudo na tela ao mesmo tempo. Às vezes, dependemos de uma condição ou de uma lista de dados vinda de uma API. É aqui que entram as diretivas estruturais.

🌓 Renderização Condicional

`v-if`, `v-else-if` e `v-else`

Essas diretivas adicionam ou removem o elemento do DOM completamente conforme a condição.

<template>
  <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}
  </button>

  <p v-if="logado">Bem-vindo ao sistema reservado! 🎉</p>
  <p v-else>Por favor, faça login para continuar. 🔒</p>
</template>

<script setup>
import { ref } from 'vue'
const logado = ref(false)
</script>

`v-show`

Diferente do v-if, o v-show apenas alterna o CSS display: none. O elemento continua no DOM.

Tip

Use v-if para condições que mudam pouco e v-show para elementos que alternam de visibilidade com muita frequência (melhor performance).

🔄 Renderização de Listas (`v-for`)

Para percorrer arrays e renderizar múltiplos elementos.

<template>
  <ul>
    <li v-for="(item, index) in tarefas" :key="index">
      {{ index + 1 }} - {{ item }}
    </li>
  </ul>
</template>

<script setup>
const tarefas = ['Aprender Vue', 'Lavar louça', 'Fazer exercícios']
</script>

Important

Sempre use o atributo :key. Ele ajuda o algoritmo de reatividade do Vue a identificar quais itens mudaram, foram adicionados ou removidos de forma eficiente.

⚡ Manipulação de Eventos (`v-on`)

Para ouvir eventos do DOM (click, submit, keyup, etc).

<!-- Sintaxe completa -->
<button v-on:click="contar">Somar</button>

<!-- Atalho (Padrão) -->
<button @click="contar">Somar</button>

<!-- Modificadores -->
<form @submit.prevent="salvar"> <!-- Previne o recarregamento da página -->

📊 Fluxo de Decisão

graph TD
    A[Dado mudou?] --> B{v-if?}
    B -- Sim/Verdade --> C[Adiciona ao DOM]
    B -- Não/Falso --> D[Remove do DOM]
    A --> E{v-for?}
    E -- Lista --> F[Cria múltiplos elementos clonados]

💻 Prática Sugerida

Crie uma lista de tarefas onde você pode: 1. Digitar uma nova tarefa num input. 2. Clicar num botão para adicionar à lista (array reativo). 3. Mostrar uma mensagem "Sua lista está vazia" caso não haja itens (v-if).

📝 Exercício

Qual a importância do atributo :key no v-for?
Explique a diferença técnica entre v-if e v-show.
Crie um campo que ao digitar "Vue" mostre uma imagem secreta na tela.

🚀 Fim do Módulo 1! No próximo módulo, vamos decompor nossa aplicação em componentes menores e profissionais.