Construa um Gerenciador de Tarefas com Vue.js

Introdução

Neste projeto, você aprenderá a construir uma aplicação simples de gerenciamento de tarefas usando Vue.js. O gerenciador de tarefas permite que você crie, exclua e acompanhe suas tarefas diárias, ajudando você a se tornar um mestre em gerenciamento de tempo.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o ambiente Vue.js
• Como exibir "Nenhum dado" por padrão quando a página é carregada
• Como adicionar tarefas à lista de tarefas
• Como excluir tarefas da lista de tarefas
• Como exibir o número total de tarefas
• Como limpar toda a lista de tarefas

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma aplicação Vue.js do zero
• Usar diretivas e data binding (ligação de dados) do Vue.js
• Implementar a funcionalidade básica CRUD (Create, Read, Update, Delete - Criar, Ler, Atualizar, Excluir)
• Lidar com interações do usuário e atualizar a interface do usuário (UI) de acordo

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── css
│   └── style.css ## Arquivo de estilo da página
├── img
│   └── icon.png ## Pequenos ícones necessários para a página
├── js
│    └── vue.js ## Versão 2.x do framework Vue.js
└── index.html ## Arquivo de codificação do layout e lógica da página

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

A exibição atual é apenas um layout estático e não implementa funções específicas.

Exibir 'Nenhum dado' por padrão

Nesta etapa, você exibirá "Nenhum dado" por padrão quando a página for carregada.

1. No arquivo index.html, adicione o objeto data da instância Vue sob el: "#box", para que ele contenha um array todoList:

data: {
  todoList: [],
}

2. Na estrutura HTML, remova todo o código de <ul class="list"></ul>. Em seguida, adicione uma renderização condicional para exibir "Nenhum dado" se o array todoList estiver vazio:

<ul class="list">
  <li v-if="!todoList.length">Nenhum dado</li>
  <!-- TODO: Adicione os itens da lista de tarefas aqui -->
</ul>

3. Salve o arquivo index.html e atualize a página. Você deve ver a mensagem "Nenhum dado" exibida. O efeito final da implementação é o seguinte:

Adicionar Tarefas à Lista

Nesta etapa, você adicionará tarefas à lista de tarefas.

1. No arquivo index.html, adicione um campo de entrada e um botão "Confirmar" à estrutura HTML:

<div class="input">
  <span>content</span>
  <input
    type="text"
    v-model="search"
    placeholder="Por favor, insira o que você vai fazer"
  />
  <span id="add" @click="addTodo">Confirmar</span>
</div>

2. Na instância Vue, adicione uma propriedade de dados search e um método addTodo:

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

3. Salve o arquivo index.html e atualize a página. Você deve ser capaz de inserir texto no campo de entrada e clicar no botão "Confirmar" para adicionar uma nova tarefa à lista. O efeito final da implementação é o seguinte:

Remover Tarefas da Lista

Nesta etapa, você adicionará a funcionalidade para excluir tarefas da lista de tarefas.

1. No arquivo index.html, adicione um ícone "Excluir" a cada item da tarefa:

<li v-if="!todoList.length">Nenhum dado</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Número de série precedente -->
  <span class="number">{{index + 1}}</span>
  <!-- Conteúdo da lista -->
  <span>{{todo}}</span>
  <!-- Botão de exclusão -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. Na instância Vue, adicione um método deleteTodo:

methods: {
  // ...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

3. Salve o arquivo index.html e atualize a página. Você deve ser capaz de clicar no ícone "Excluir" para remover uma tarefa da lista. O efeito final da implementação é o seguinte:

Exibir o Número Total de Tarefas

Nesta etapa, você exibirá o número total de tarefas na lista de tarefas.

1. Na estrutura HTML, adicione uma seção "Total" na parte inferior da lista de tarefas:

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- ... -->
</li>
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <!-- ... -->
</li>

2. Salve o arquivo index.html e atualize a página. Você deverá ver o número total de tarefas exibido na parte inferior da lista.

Limpar a Lista de Tarefas

Nesta etapa, você adicionará a funcionalidade para limpar toda a lista de tarefas.

1. Na instância Vue, adicione um método clear:

methods: {
  // ...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

2. Na estrutura HTML, adicione um botão "Limpar" na seção "Total":

<!-- ... -->
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <b id="clear" @click="clear">Limpar</b>
</li>

3. Salve o arquivo index.html e atualize a página. Você deverá ser capaz de clicar no botão "Limpar" para remover todas as tarefas da lista.

Parabéns! Você concluiu o projeto Time Management Master usando Vue.js. O efeito final da implementação é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.