Diretivas e Renderização 📜

Aula 04 - Controlando o Fluxo do Template

🛠️ O que são Diretivas?

• Atributos especiais com o prefixo v-
• Aplicam comportamentos reativos ao DOM
• "Ensina" o HTML a agir como lógica

❓ Renderização Condicional: v-if

• Adiciona ou Remove o elemento do documento

  <p v-if="admin">Área Restrita</p>
  

• Ideal para elementos que mudam raramente

🚥 v-else e v-else-if

• Funciona como o if/else tradicional

  <p v-if="estoque > 5">Em estoque</p>
  <p v-else-if="estoque > 0">Últimas unidades!</p>
  <p v-else>Esgotado</p>
  

👁️ Visibilidade: v-show

• Não apaga o elemento, apenas aplica display: none
• Mais rápido para trocas frequentes (ex: piscar mensagem)
• O elemento sempre está no DOM (pode afetar performance se for gigante)

🥊 v-if vs v-show

🔄 Renderização de Listas: v-for

• Percorre arrays ou objetos para gerar múltiplos elementos

  <li v-for="item in lista"> {{ item }} </li>
  

• Sintaxe: item in lista ou (item, index) in lista

🔑 A Importância da :key

• Atributo obrigatório para performance no v-for
• Ajuda o Vue a rastrear cada elemento de forma única

  <li v-for="user in users" :key="user.id">
    {{ user.nome }}
  </li>
  

📡 Escuta de Eventos: v-on (@)

• Captura cliques, inputs, teclados e mais
• Atalho: @

  <button @click="diminuir"> - </button>
  

⚡ Chamando Funções

• Você pode passar argumentos: @click="deletar(item.id)"
• Acessar o evento nativo: @click="tratar($event)"

🛠️ Modificadores de Eventos

• .prevent: e.preventDefault() (evita recarregar form)
• .stop: e.stopPropagation() (evita bolhas)
• .once: Roda o evento apenas uma vez

⌨️ Modificadores de Teclado

• Reagir a teclas específicas: @keyup.enter="enviar" @keyup.esc="cancelar"

🏗️ v-for com Objetos

• Também podemos percorrer propriedades de um objeto:

  <div v-for="(valor, chave) in meuObjeto">
    {{ chave }}: {{ valor }}
  </div>
  

📊 Fluxo de Renderização

graph TD
    Data[Array de Tarefas] --> VFor[v-for loop]
    VFor --> DOM[Lista de Itens no Navegador]
    UserClick[Clique em X] --> VOn[@click]
    VOn --> Function[Remover do Array]
    Function --> Data

⚠️ Perigo: v-if com v-for

• MÁ PRÁTICA: Usar as duas na mesma tag
• O Vue prioriza o v-if (pode dar erro de item indefinido)
• Solução: Use uma tag <template> ou uma computed property para filtrar

🛠️ Template Tag

• Tag "invisível" que não aparece no HTML final
• Ótima para agrupar diretivas sem criar divs extras

  <template v-if="carregado">
     <h2>Título</h2>
     <p>Desc</p>
  </template>
  

🏗️ Desafio da Aula

• Criar uma lista de compras dinâmica
• Adicionar itens via input + botão
• Remover itens ao clicar neles
• Exibir mensagem se a lista estiver vazia

🏁 Resumo

• Diretivas estendem o HTML
• v-if/v-for para estrutura
• @click/v-on para comportamento
• Identificadores únicos (ky) salvam a performance

🏁 Dúvidas?

Bom código a todos! Próxima aula: Componentes e Props.