Pular para o conteúdo

Programando Soluções

Projeto ToDo List com VueJS

todolist

Introdução

Criar projetos é muito importante principalmente quando está aprendendo a programar ou uma tecnologia nova na programação.

Um sistema de ToDo List é praticamente um “hello world” pois você consegue treinar alguns conceitos a mais do que só a teoria.

Normalmente nos projetos, alguns problemas acontecem que faz a gente sair da zona de conforto e buscar uma solução para os problemas.

E quanto mais soluções encontrarmos, mais a gente melhora na programação.

Preview do projeto

Projeto

Neste projeto de ToDo List vou mostrar como criar a parte de criação, listagem, edição e exclusão de registros com VueJS.

Para fazer a tela de listagem e o formulário de cadastro e edição, utilizei o framework BootstrapVue, que é o que estou mais familiarizado, mas você pode tentar implementar com outro framework se quiser.

Para salvar as tarefas do ToDo List, neste momento utilizei o localStorage do navegador.

Futuramente pretendo utilizar uma outra biblioteca que serve para salvar esses dados e ajudar no desenvolvimento do frontend, porém é assunto para outro artigo.

Também futuramente pretendo adicionar mais funcionalidades nesse projeto, embora ele seja simples, ele pode ficar mais complexo e ter mais conceitos para apresentar.

Como o projeto é muito extenso, e a explicação é muito complexa, vou deixar aqui abaixo o vídeo tutorial completo e com toda a explicação do código.

Caso queira também vou deixar diretamente o código fonte para você utilizar.

Vídeo

Código fonte

O código fonte está no meu CodeSandbox, neste link.

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Referências

https://bootstrap-vue.org/

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok