📊 Capítulo 03: Templates & Diretivas Essenciais
Especialização em Frontend com Vue.js
🗺️ O Arsenal de Diretivas do Template Vue
flowchart TD
ROOT["Diretivas Vue (v-*)"]
--> BIND["v-bind ou : (Liga atributos HTML e classes reativas)"]
ROOT --> ON["v-on ou @ (Escuta eventos DOM com modificadores .prevent, .stop)"]
ROOT --> COND{"Condicionais"}
COND --> VIF["v-if / v-else-if / v-else (Destrói e recria o elemento no DOM)"]
COND --> VSHOW["v-show (Altera apenas 'display: none' via CSS)"]
ROOT --> LIST["v-for com :key obrigatório (Renderização de listas otimizada)"]
ROOT --> MODEL["v-model (Two-Way Data Binding em inputs e componentes)"]
style ROOT fill:#ede7f6,stroke:#512da8,stroke-width:2px
style BIND fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
style ON fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
style COND fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
style VIF fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
style VSHOW fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
style LIST fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px
style MODEL fill:#b2dfdb,stroke:#00796b,stroke-width:1.5px
🎯 Slide 1: v-if vs v-show
-
v-if: Custo de alternância mais alto. O nó é completamente removido da árvore do DOM. Ideal se a condição mudar raramente. v-show: Custo de renderização inicial ligeiramente superior, mas alternância quase gratuita (display: none). Ideal para abas, tooltips e modais frequentes!
🎯 Slide 2: Iteração Otimizada com v-for e :key
<ul>
<li v-for="(item, index) in itens" :key="item.id">
{{ index + 1 }} - {{ item.nome }}
</li>
</ul>
- Nunca omita a
:keyúnica: O algoritmo de reconciliação de Virtual DOM precisa dela para reciclar elementos sem recriar nós desnecessários.
🎯 Slide 3: Modificadores de Evento
@submit.prevent="salvar": Previne o reload padrão da página.@click.stop="abrirModal": Impede o evento de borbulhar (event bubbling).
🔗 Navegação do Capítulo 03
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim