Fazendo uma todo list com VueJS.

Fala galera! No primeiro artigo do ano de 2021 irei mostrar um pouco do Vue.js 3, fazendo uma todo list.

Pré-requisitos:

Ter o Node.js instalado no pc;
Conhecimento básico de HTML, Css e Javascript.

Para criar o projeto com vuejs já configurado precisamos do Vue CLI.

O Vue CLI é um ferramenta para auxiliar no desenvolvimento nos projetos Vue.js.

Existe duas formas de instala-lo:

Com npm:

npm install -g @vue/cli

Ou com yarn:

yarn global add @vue/cli

Com o Vue CLI já instalado podemos criar o nosso projeto vue.

vue create <nomedoprojeto>

Vamos nomear este projeto como todolist-vuejs.

Quando você rodar esse comando vai aparecer essas 3 opções:

Neste artigo vamos usar a versão 3 do Vue.js.

Depois do Vue CLI criar o projeto, já podemos ver a estrutura de arquivos básica de um projeto vue.

No terminal se você rodar o comando:

npm run serve

yarn serve

Você estará rodando localmente o projeto vue.

Para começar o projeto vamos criar a lógica basica de uma todo list, adicionar uma tarefa.

No arquivo HelloWorld.vue vamos apagar todo o conteudo do bloco <template> e todo o conteudo do bloco <style>

No bloco <template vamos fazer a estrutura html do projeto:

<div class="app">
    <ol>
      <li >
        <p>Aprender Vue</p>
      </li>
    </ol>
    <div class="inputs">
      <input placeholder="Todo"/>
      <div class="buttons">
        <button >Adicionar Tarefa</button>
        <button>Remover Todas as tarefas</button>
      </div>
    </div>
  </div>

No javascript vamos implementar a lógica da todo list:

Antes de tudo no export default vamos adicionar a função data responsavel por renderizar os dados do projeto:

data() {
    return {
      todos: [{ id: 1, text: "Aprender VueJs" }],
    };
}

No return criamos um objeto chamado todos que armazena as tarefas cadastradas.

Novamente no export default vamos adicionar um objeto chamado methods:

methods: {
    
},

Nele vamos criar os métodos da aplicação como remover tarefas e adicionar tarefas.

Vamos criar o nosso primeiro metodo o de adicionar tarefas:

addTodo(text) {
    if (text !== " ") {
        this.todos.push({
           id: this.todos.length + 1,
           text,
        });
    }
}

E tambem de remover tarefas:

removeTodos() {
      this.todos = [];
},

Para fazer tudo funcionar vamos adicionar atributos nas tags html:

No li vamos adicionar um atributo para renderizar todas as tarefas cadastradas, com o v-for:

<ol>
    <li v-for="todo in todos" v-bind:key="todo.id">
        <p>{{ todo.text }}</p>
    </li>
</ol>

O v-bind:key="todo.id" é para cada li tem um id unico.

O {{ todo.text }} vai fazer o <p></p> renderizar o texto da tarefa.

Vamos fazer a lógica de adicionar tarefas no html com os atributos v-model e v-on:click:

<div class="inputs">
      <input placeholder="Todo" v-model="text" />
      <div class="buttons">
        <button v-on:click="addTodo(text)">Adicionar Tarefa</button>
        <button v-on:click="removeTodos()">Remover Todas as tarefas</button>
      </div>
</div>

O v-model vai nos auxiliar a pegar o dado do input de adicionar tarefa, guardando em uma variavel.

O v-on:click vai executar uma função caso o botão seja clicado.

Por fim vamos renomear o arquivo HelloWorld.vue para TodoList.vue.

E também no arquivo App.vue vamos fazer as seguintes alterações:

No bloco <template>:

Vamos Criar a tag da todo list:

<template>
  <h1>TodoList com Vue.js 3!</h1>
  <TodoList/>
</template>

E no Javascript vamos renomear o import do componente:

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

Depois de muito código é só rodar npm run serve, para ver o resultado final!

Se este artigo realmente te ajudou compartilhe com seus amigos e amigas deixe o gostei(se tiver) e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

Link para o repositório.