Se você está iniciando no Vue.js, nada melhor do que construir um aplicativo prático para solidificar seus conhecimentos. Neste tutorial, vamos guiar você na construção passo a passo de um aplicativo To-Do usando Vue.js. Vamos mergulhar no mundo do Vue.js, explorando componentes, estado de aplicação e interatividade para criar um aplicativo funcional e atraente de lista de tarefas.
Configuração Inicial:
1. Configurando um Projeto Vue:
Vue CLI: Use o Vue CLI para criar rapidamente a estrutura inicial do seu projeto.
vue create meu-app-todo
2. Estrutura de Arquivos:
Arquivos Principais:
- App.vue: Componente principal que contém a estrutura da aplicação.
- main.js: Ponto de entrada da aplicação.
Criando o Componente To-Do:
1. Estrutura Básica do Componente:
Definição: Crie um componente TodoList para a lista de tarefas.
<!-- TodoList.vue -->
<template>
<div>
<h1>Minhas Tarefas</h1>
<!-- Lista de tarefas aqui -->
</div>
</template>
<script>
export default {
data() {
return {
tasks: [], // Array para armazenar as tarefas
newTask: '', // Nova tarefa a ser adicionada
};
},
methods: {
// Métodos para manipular tarefas
},
};
</script>
<style scoped>
/* Estilos do componente aqui */
</style>
Manipulando o Estado da Aplicação:
1. Adicionando Tarefas:
Método addTask: Adicione novas tarefas à lista.
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push({ text: this.newTask, completed: false });
this.newTask = ''; // Limpa o campo de nova tarefa
}
},
},
2. Marcando Tarefas como Concluídas:
Método completeTask: Altere o estado de conclusão de uma tarefa.
methods: {
completeTask(index) {
this.tasks[index].completed = !this.tasks[index].completed;
},
},
3. Removendo Tarefas:
Método removeTask: Remova uma tarefa da lista.
methods: {
removeTask(index) {
this.tasks.splice(index, 1);
},
},
Integrando o Componente na Aplicação Principal:
1. Importando o Componente:
Main.js: Importe e utilize o componente TodoList na aplicação principal.
// main.js
import Vue from 'vue';
import App from './App.vue';
import TodoList from './components/TodoList.vue';
Vue.component('TodoList', TodoList);
new Vue({
render: h => h(App),
}).$mount('#app');
2. Usando o Componente na Aplicação:
App.vue: Integre o componente TodoList na aplicação principal.
<!-- App.vue -->
<template>
<div id="app">
<TodoList />
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
/* Estilos globais da aplicação aqui */
</style>
Estilizando o Aplicativo To-Do:
1. Adicionando Estilos Simples:
Estilo Global (App.vue): Adicione estilos básicos para melhorar a aparência.
/* App.vue */
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#app {
text-align: center;
}
</style>
2. Estilos do Componente (TodoList.vue):
Estilo Local (scoped): Estilize o componente TodoList para uma aparência mais agradável.
/* TodoList.vue */
<style scoped>
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 8px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.completed {
text-decoration: line-through;
color: #999;
}
input[type="text"] {
padding: 8px;
margin-right: 8px;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
}
</style>
Conclusão:
Parabéns! Você construiu com sucesso um aplicativo To-Do funcional usando Vue.js. Este tutorial cobriu conceitos fundamentais, como criação de componentes, manipulação de estado da aplicação e estilização básica. Continue explorando o Vue.js, experimente adicionar recursos extras ao seu aplicativo To-Do, como armazenamento local ou classificação de tarefas. Este é apenas o começo da sua jornada com Vue.js.