Exercícios: Aula 04 - Diretivas e Renderização 📜

1. Exibição Condicional

Qual a diferença técnica entre usar v-if e v-show para esconder um elemento na tela? Em qual cenário de performance o v-show é mais recomendado?

2. Renderização de Listas

Crie um array reativo chamado frutas contendo ["Maçã", "Banana", "Uva"]. Use a diretiva v-for para renderizar esses nomes dentro de uma lista não ordenada (<ul> e <li>). Não esqueça de utilizar o atributo :key.

3. Captura de Eventos (v-on)

Crie um botão que dispare um alerta (alert) com a mensagem "Olá Vue!" ao ser clicado. Demonstre o uso da sintaxe completa (v-on:click) e do atalho (@click).

4. Modificadores de Evento

Explique para que serve o modificador .prevent em um evento de submissão de formulário (@submit.prevent). O que acontece se não o utilizarmos em uma SPA?

5. Desafio: Lista de Tarefas Simples (V1)

Crie uma variável reativa novaTarefa (string) e uma lista tarefas (array). - Crie um input ligado à novaTarefa via v-model. - Crie um botão "Adicionar" que pegue o valor de novaTarefa, adicione ao array tarefas e limpe o input. - Renderize a lista na tela usando v-for. - Adicione um v-if para mostrar uma mensagem "Sua lista está vazia" caso não haja tarefas.