Formulários e Entradas
Formulários e Entradas em Vue.js são fundamentais para capturar dados do usuário, validar informações e interagir de maneira dinâmica com a interface. Eles permitem criar experiências reativas, onde mudanças nos inputs são refletidas imediatamente no modelo de dados, graças ao recurso de binding bidirecional fornecido pelo v-model. Esse mecanismo elimina a necessidade de manipulação direta do DOM, promovendo código mais limpo, seguro e eficiente.
Em projetos reais, formulários são usados para cadastro de usuários, login, filtros de busca, configuração de preferências e qualquer situação que demande interação do usuário com a aplicação. Neste tutorial, vamos explorar como criar e gerenciar formulários de maneira avançada, utilizando conceitos como estrutura de dados, algoritmos para validação, princípios de OOP e boas práticas de Vue.js.
Após este conteúdo, você será capaz de construir formulários reativos, validar entradas de maneira modular, tratar erros de forma robusta e aplicar padrões de design que melhoram a escalabilidade e manutenção do seu código. Além disso, entenderá como formular dados para requisições HTTP de forma segura e otimizada, integrando o formulário ao restante da arquitetura do sistema de maneira eficiente e profissional.
Exemplo Básico <template>
text<div>
<h2>Formulário de Cadastro</h2>
<form @submit.prevent="submitForm">
<label for="name">Nome:</label>
<input type="text" id="name" v-model="user.name" required />
<label for="email">Email:</label>
<input type="email" id="email" v-model="user.email" required />
<button type="submit">Enviar</button>
</form>
<p v-if="submitted">Cadastro realizado: {{ user.name }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
email: ''
},
submitted: false
}
},
methods: {
submitForm() {
if(this.user.name && this.user.email) {
this.submitted = true;
}
}
}
}
</script>Neste exemplo, o v-model cria o binding bidirecional entre os campos de input e o objeto user no data, garantindo que alterações na interface reflitam no modelo e vice-versa. O modificador @submit.prevent evita o comportamento padrão do HTML, permitindo a execução de lógica personalizada no método submitForm. O flag submitted controla a renderização condicional da mensagem de feedback usando v-if. Esse padrão demonstra como Vue.js permite manipular formulários de forma reativa e segura, aplicando boas práticas sem acessar diretamente o DOM.
Exemplo Prático <template>
text<div>
<h2>Formulário Avançado com Validação</h2>
<form @submit.prevent="submitForm">
<label for="name">Nome:</label>
<input type="text" id="name" v-model="user.name" @input="validateName" required />
<span v-if="errors.name" class="error">{{ errors.name }}</span>
<label for="email">Email:</label>
<input type="email" id="email" v-model="user.email" @input="validateEmail" required />
<span v-if="errors.email" class="error">{{ errors.email }}</span>
<label for="password">Senha:</label>
<input type="password" id="password" v-model="user.password" @input="validatePassword" required />
<span v-if="errors.password" class="error">{{ errors.password }}</span>
<button type="submit" :disabled="hasErrors">Enviar</button>
</form>
<p v-if="submitted">Cadastro realizado: {{ user.name }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
email: '',
password: ''
},
errors: {},
submitted: false
}
},
computed: {
hasErrors() {
return Object.keys(this.errors).length > 0;
}
},
methods: {
validateName() {
this.errors.name = this.user.name.length < 3 ? 'Nome deve ter pelo menos 3 caracteres' : '';
},
validateEmail() {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
this.errors.email = !regex.test(this.user.email) ? 'Email inválido' : '';
},
validatePassword() {
this.errors.password = this.user.password.length < 6 ? 'Senha deve ter pelo menos 6 caracteres' : '';
},
submitForm() {
this.validateName();
this.validateEmail();
this.validatePassword();
if(!this.hasErrors) {
this.submitted = true;
}
}
}
}
</script>Este exemplo avançado mostra validação em tempo real utilizando métodos modulares que atualizam o objeto errors de forma reativa. A propriedade computada hasErrors desabilita o botão de envio caso existam erros, garantindo melhor experiência do usuário. As funções validateName, validateEmail e validatePassword são separadas para modularidade, reutilização e manutenção mais simples. Este padrão é aplicável em aplicações reais, promovendo formulários robustos, seguros e escaláveis.
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| v-model | Binding bidirecional entre input e dados | <input v-model="user.name" /> |
| @input | Executa lógica ou validação em alterações do input | <input @input="validateName" /> |
| computed | Monitoramento reativo de estado e validação | hasErrors() { return Object.keys(errors).length > 0 } |
| methods | Organização de lógica de validação e envio | submitForm() { /* valida e envia */ } |
| v-if | Renderização condicional de mensagens de erro | <span v-if="errors.email">{{ errors.email }}</span> |
Para boas práticas em formulários Vue.js, utilize v-model para binding, métodos para validação modular e computed properties para monitorar erros de forma eficiente. Evite alterar diretamente o DOM ou ignorar validações, o que pode gerar problemas de manutenção e performance. Use Vue Devtools para depuração e mantenha sempre estruturas de dados limpas e algoritmos eficientes. Segurança é essencial: valide entradas tanto no cliente quanto no servidor e evite manipulação direta de dados sensíveis.
Ao dominar formulários e entradas, você poderá construir interfaces reativas e seguras, aplicáveis em cadastros, logins, filtros e páginas de configuração. Próximos passos incluem formulários dinâmicos, comunicação entre componentes, gerenciamento de estado com Vuex ou Pinia, e otimização de desempenho e experiência do usuário em aplicações complexas.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo