🚀 Capítulo 10: v-model - Formulários
🎯 Objetivo da Aula
Ao final desta aula, você saberá como capturar dados digitados pelo usuário em formulários de forma ultra-rápida usando a diretiva v-model (Ligação de Dados Bidirecional).
🏢 O Cenário Prático (Seu Desafio)
A Aliança Rebelde precisa de novos voluntários! Seu desafio hoje é criar o formulário de Alistamento de Rebeldes. Você precisará capturar o nome do voluntário e a sua função desejada (Piloto ou Jedi) em tempo real!
🧠 Fundamentos: A Teoria Traduzida
No React, precisávamos criar um estado e uma função onChange para ler o que o usuário digitava. No Vue, isso é muito mais simples graças ao v-model.
O v-model faz a Ligação Bidirecional (Two-Way Data Binding):
- Se o usuário digita no campo, a variável no JavaScript atualiza sozinha.
- Se você mudar a variável no JavaScript, o texto no campo da tela também muda sozinho!
📖 Exemplo Guiado: Formulário de Alistamento
Vamos criar o formulário no App.vue.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e altere o código:
<template>
<div>
<h1>📝 Alistamento Rebelde</h1>
<form @submit.prevent="enviarFormulario">
<label>Nome do Voluntário:</label>
<!-- O v-model liga o input direto com a variável 'nome' -->
<input type="text" v-model="nome" />
<button type="submit">Alistar</button>
</form>
<hr />
<!-- Mostrando o valor em tempo real -->
<p>Digitando: **{{ nome }}**</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const nome = ref('');
function enviarFormulario() {
alert(`Bem-vindo à Aliança, ${nome.value}!`);
}
</script>Nota: O @submit.prevent é uma forma curta do Vue para evitar que a página recarregue ao enviar o formulário (o famoso e.preventDefault()).
🕹️ Como Executar e Testar no VS Code
- Salve e veja o navegador.
- Digite seu nome no campo. Veja que o texto abaixo muda na mesma hora!
🛠️ Prática Obrigatória 1
Adicione um campo do tipo <select> (menu suspenso) para o usuário escolher a função: “Piloto” ou “Jedi”. Crie uma nova variável reativa const funcao = ref('Piloto') e use o v-model nela.
🛠️ Prática Obrigatória 2
Atualize a mensagem do alert() para mostrar também a função escolhida (ex: “Bem-vindo à Aliança, Luke! Sua função será: Jedi”).
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No <template>:
<select v-model="funcao">
<option value="Piloto">Piloto</option>
<option value="Jedi">Jedi</option>
</select>No <script setup>:
const funcao = ref('Piloto');
function enviarFormulario() {
alert(`Bem-vindo, ${nome.value}! Função: ${funcao.value}`);
}