DEV Community

loading...
Cover image for [PT-BR] Fazendo uma todo list com VueJS.
A Caverna do Patocórnio

[PT-BR] Fazendo uma todo list com VueJS.

João Pedro Resende
Seja bem-vindo ao meu dev.to!👋 Sou o João Pedro, sou desenvolvedor frontend! 👨‍💻 📺Live coding na @TwitchBr | 🔗https://twitch.tv/jpbrab0
Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Ou com yarn:

yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

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

vue create <nomedoprojeto>
Enter fullscreen mode Exit fullscreen mode

Vamos nomear este projeto como todolist-vuejs.

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

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.

Estrutura de arquivos Vuejs 3


No terminal se você rodar o comando:

npm run serve
Enter fullscreen mode Exit fullscreen mode

Ou

yarn serve
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" }],
    };
}
Enter fullscreen mode Exit fullscreen mode

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

Novamente no export default vamos adicionar um objeto chamado methods:

methods: {

},
Enter fullscreen mode Exit fullscreen mode

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,
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

E tambem de remover tarefas:

removeTodos() {
      this.todos = [];
},
Enter fullscreen mode Exit fullscreen mode

Para fazer tudo funcionar vamos adicionar atributos nas tags html:

  1. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

E no Javascript vamos renomear o import do componente:

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

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

Collapse
eduardoklosowski profile image
Eduardo Klosowski

Artigo interessante para quem não conhece o Vue. Parabéns.

A formatação do markdown poderia estar melhor em alguns pontos, tem alguns erros, mas nada que compromete o entendimento. Recomendaria colocar links explicando a diferença entre npm e yarn, qual a diferença entre a instalação normal e a global, se não quiser explicar por exemplo, o que pode ser interessante para iniciantes que não conhecem isso ainda.

Collapse
jpbrab0 profile image
João Pedro Resende Author

Muito obrigado pelas dicas! Em breve irei mudar algumas coisas no artigo.

Collapse
leandroats profile image
Leandro Torres

Muito legal ver um jovem seguindo a carreira de Dev, principalmente compartilhando conhecimento.

Parabéns pelo artigo.

Collapse
rogerionunes profile image
Rogério Nunes

Muito bom, parabéns!! Ficou show!!

Collapse
tiagumb profile image
Tiago Mota Barbosa

Brabo d+ JP, parabéns!

Collapse
jpbrab0 profile image
João Pedro Resende Author

Muito obrigado!

Collapse
caroldonadel profile image
Carolina Donadel

Muito bom jei pi, gostei bastante :)

Collapse
jpbrab0 profile image
João Pedro Resende Author

:D