Vue
Hands-on
🎉 Avaliação do Evento Vue.js 🎉
Obrigado por participar!
Objetivos do desafio:
- Vamos construir uma aplicação em Vue.js (via CDN, sem build tools tipo Vite ou Webpack).
- O foco vai ser ilustrar conceitos básicos, como:
- Two-way data binding (
v-model) - Eventos (
@click,@input, etc.) - Gerenciamento de estado simples (sem Vuex ou Pinia, provavelmente com
data,props,emit, ou um objeto global reativo)
- Two-way data binding (
- O cenário é uma simulação de controle de eventos, com:
- Palestrantes
- Participantes
- Participantes avaliam os eventos com uma nota entre 0 e 3, onde:
- 3 = Muito Satisfeito
- 2 = Satisfeito
- 1 = Irrelevante
- 0 = Insatisfeito
- A ideia é ir implementando aos poucos, passo a passo.
Boas vindas
Vamos começar com o básico, aquele clássico "Hello Vue" com nossas duas variáveis pra dar as boas-vindas. Abaixo está o código HTML completinho, usando Vue.js via CDN:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Evento Vue.js</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>Bem-vindo ao nosso evento de Noções Básicas de Vue.js</h1>
<p><strong>Palestrante:</strong> {{ palestrante }}</p>
<p><strong>Organizador:</strong> {{ organizador }}</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
palestrante: 'Gleyson Sampaio',
organizador: 'Iza Tec'
}
}
}).mount('#app');
</script>
</body>
</html>
Esse é o pontapé inicial! Ele já demonstra o uso do
{{ }} pra interpolação de variáveis e o conceito de reatividade com data().Participantes
Bora pra próxima etapa então: criar uma lista de participantes, onde cada um tem um nome e uma cidade.
A gente vai:
- Criar dois
inputs para digitar nome e cidade. - Usar
v-modelpara fazer o two-way data binding. - Criar um botão que, ao ser clicado, adiciona o participante à lista.
- Mostrar os participantes com
v-for.
Segue o código atualizado:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Evento Vue.js</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>Bem-vindo ao nosso evento de Noções Básicas de Vue.js</h1>
<p><strong>Palestrante:</strong> {{ palestrante }}</p>
<p><strong>Organizador:</strong> {{ organizador }}</p>
<hr>
<h2>Participantes</h2>
<div>
<input v-model="novoParticipante.nome" placeholder="Digite seu nome" />
<input v-model="novoParticipante.cidade" placeholder="Digite sua cidade" />
<button @click="adicionarParticipante">Adicionar Participante</button>
</div>
<ul>
<li v-for="(participante, index) in participantes" :key="index">
{{ participante.nome }} - {{ participante.cidade }}
</li>
</ul>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
palestrante: 'Gleyson Sampaio',
organizador: 'Iza Tec',
novoParticipante: {
nome: '',
cidade: ''
},
participantes: []
}
},
methods: {
adicionarParticipante() {
const { nome, cidade } = this.novoParticipante;
if (nome && cidade) {
this.participantes.push({ ...this.novoParticipante });
this.novoParticipante.nome = '';
this.novoParticipante.cidade = '';
} else {
alert('Por favor, preencha nome e cidade.');
}
}
}
}).mount('#app');
</script>
</body>
</html>
Aqui a gente já aplicou:
v-modelpra capturar os dados.v-forpra exibir a lista.- Um método
adicionarParticipantecom verificação simples.
Explicação
const { nome, cidade } = this.novoParticipante;
- Objetivo: Extrair os dados digitados (nome e cidade) do participante atual.
- Conceito usado: Desestruturação de objeto (object destructuring).
this.participantes.push({ ...this.novoParticipante });
- Objetivo: Adicionar o participante digitado à lista de participantes de forma independente.
- Conceito usado: Spread operator para copiar propriedades e evitar referência ao mesmo objeto.
this.novoParticipante.nome = '';
this.novoParticipante.cidade = '';
- Objetivo: Limpar os campos de nome e cidade após o participante ser adicionado à lista.
- Conceito usado: Atribuição de valores vazios para resetar o estado do objeto.
if (nome && cidade)
- Objetivo: Verificar se ambos os campos (nome e cidade) estão preenchidos. Se sim, a execução continua dentro do bloco
if. - Conceito usado: Avaliação booleana para verificar se as variáveis
nomeecidadenão estão vazias (ou seja, são valores "truthy").
else { alert('Por favor, preencha nome e cidade.'); }
- Objetivo: Caso algum dos campos esteja vazio, exibir um alerta solicitando que o usuário preencha os dados corretamente.
- Conceito usado: Condição
elsepara tratar o caso em que os campos não estão preenchidos.
Essa parte do código está bem estruturada, utilizando a lógica de verificação simples e feedback pro usuário
Antes de mergulhar no Vue.js, é essencial dominar as noções básicas de JavaScript. Isso te dará uma base sólida para entender os conceitos do Vue de forma mais fácil e eficiente!
ChatGPT Pompts
Fala, amigão! Temos um desafio bem legal: vamos ilustrar o desenvolvimento de uma aplicação Vue.js para simular o controle de eventos. Nela, teremos um palestrante e os participantes poderão avaliar a qualidade do evento com uma nota (3 - Muito Satisfeito, 2 - Satisfeito, 1 - Irrelevante, 0 - Insatisfeito). Vamos usar a CDN e explorar recursos básicos como two-way data binding, eventos e gerenciamento de estado, tudo com um cenário bem simples, que vamos implementar gradativamente.
Mas não implemente nada agora, só preciso que confirme se captou o objetivo?
Ta ficando bom em, agora iremos criar mais uma variavel participantes onde iremos digitar o nome e cidade de onde estão assistindo em forma de objetos e claro os inputs e v-for para simular a inclusão certo ?
Vamos fazer um ajuste, tem como novoNome: '' e novaCidade: '' serem um objeto participante? fica mais legal não ?
Vc é fera em, me detalhe a implementação abaixo:
const { nome, cidade } = this.novoParticipante;
if (nome && cidade) {
this.participantes.push({ ...this.novoParticipante });
this.novoParticipante.nome = '';
this.novoParticipante.cidade = '';
} else {
alert('Por favor, preencha nome e cidade.');
}