Projeto 3: To-do List

Curso Completo de Vue.js: Dominando do Básico ao Avançado

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.

Siga-me

Entrar na conversa