Sobre a Aula
Projeto 3: To-do List
Descrição: Este projeto é uma simples lista de tarefas que permite que os usuários adicionem, removam e marquem como concluídas as tarefas.
Requisitos:
- O projeto deve permitir que os usuários adicionem novas tarefas.
- O projeto deve permitir que os usuários removam tarefas.
- O projeto deve permitir que os usuários marquem tarefas como concluídas.
Passos:
- Crie um diretório para o projeto:
mkdir to-do-list
- Instale as dependências:
npm install vue
- Crie os arquivos iniciais:
touch index.html touch main.js touch style.css
- Implemente o código:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>To-do List</title> </head> <body> <div id="app"> <h1>To-do List</h1> <ul> <li v-for="task in tasks" :key="task.id"> <input type="checkbox" v-model="task.completed"> {{ task.title }} </li> </ul> <input type="text" v-model="newTask"> <button @click="addTask">Adicionar tarefa</button> </div> </body> </html>
JavaScript
import Vue from 'vue'; export default { name: 'App', data() { return { tasks: [], newTask: '', }; }, mounted() { }, methods: { addTask() { if (this.newTask) { this.tasks.push({ title: this.newTask, completed: false, }); this.newTask = ''; } }, }, };
CSS
body { font-family: sans-serif; } ul { list-style-type: none; margin: 0; padding: 0; } li { margin-bottom: 10px; } input[type="checkbox"] { margin-right: 10px; }
- Execute o projeto:
npm run serve
Este projeto irá exibir a seguinte tela:
To-do List - -
Desafios:
- Adicione uma funcionalidade para permitir que os usuários editem as tarefas.
- Adicione uma funcionalidade para permitir que os usuários excluam as tarefas.
Conclusão:
Este projeto é uma boa maneira de praticar os conceitos aprendidos no curso, como:
- Atributos
v-for
para iterar sobre um array. - Atributos
v-model
para vincular os dados do componente à interface do usuário. - Métodos de componentes para executar ações.
Avaliação:
Para avaliar este projeto, você pode considerar os seguintes critérios:
- O projeto atende aos requisitos especificados?
- O código está bem escrito e organizado?
- O projeto é funcional e intuitivo?
Sugestões:
Se você quiser tornar este projeto mais desafiador, você pode adicionar as seguintes funcionalidades:
- Permita que os usuários adicionem datas de vencimento para as tarefas.
- Permita que os usuários adicionem notas às tarefas.
- Permita que os usuários gerenciem tarefas em diferentes listas.
Entrar na conversa