Exercícios: Aula 03 - Reatividade e Data Binding ⚛️

1. Ref vs Reactive

Explique quando é mais vantajoso usar a função ref() em vez de reactive() para criar variáveis reativas. Cite um exemplo de código para cada uma.

2. Interpolação de Texto

Crie uma variável reativa chamada contador iniciando em 0. Exiba esse valor no HTML dentro de um <h2> utilizando a sintaxe de chaves duplas (Mustache). Adicione um botão que, ao ser clicado, aumente o valor desse contador no script.

3. Atribuição de Atributos (v-bind)

Imagine que você tem uma variável reativa linkImagem contendo a URL de uma foto. Como você faria para aplicar essa URL ao atributo src de uma tag <img> de forma dinâmica? Escreva a sintaxe completa e a sintaxe curta (atalho).

4. Two-Way Data Binding (v-model)

Crie um campo de input de texto e um parágrafo abaixo dele. Use a diretiva v-model para que tudo o que o usuário digitar no input apareça instantaneamente dentro do parágrafo. Qual o nome desse conceito de sincronização bidirecional?

5. Desafio: Profiler Simples

Crie um objeto reativo (usando reactive) chamado usuario com as propriedades nome e idade. Crie dois inputs no HTML (um para nome e outro para idade) ligados a esse objeto via v-model. Exiba uma frase formatada como: "Olá, meu nome é [nome] e tenho [idade] anos".