![Cover image for [PT-BR] Fazendo uma todo list com VueJS.](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8qx64ovujv6n688417ne.png)
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
Ou
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!
Top comments (8)
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.
Muito obrigado pelas dicas! Em breve irei mudar algumas coisas no artigo.
Muito legal ver um jovem seguindo a carreira de Dev, principalmente compartilhando conhecimento.
Parabéns pelo artigo.
Muito bom, parabéns!! Ficou show!!
Brabo d+ JP, parabéns!
Muito obrigado!
Muito bom jei pi, gostei bastante :)
:D