Tutorial paso a paso para crear una aplicación de lista de tareas con Vue.js y JavaScript

¡Bienvenido a este tutorial Vue.js para principiantes! Hoy aprenderás cómo crear una aplicación lista de tareas sencilla usando Vue.js y JavaScript. Ideal para quienes están comenzando en el desarrollo frontend JavaScript y quieren entender los conceptos básicos de programación Vue para principiantes.

En esta guía, cubriremos desde la instalación y configuración del entorno con Vue CLI, hasta la creación de componentes, manejo del estado reactivo, funcionalidades para agregar, eliminar y marcar tareas como completadas, y un toque de diseño con CSS para que tu app se vea bien. ¡Manos a la obra!

Contenido

1. ¿Qué es Vue.js y por qué usarlo?
2. Configuración del entorno con Vue CLI
3. Estructura del proyecto y componentes básicos
4. Manejo del estado reactivo y lógica para la lista de tareas
5. Agregar, eliminar y marcar tareas como completadas
6. Diseño sencillo con CSS
7. Buenas prácticas en Vue.js para principiantes
8. Conclusión y próximos pasos

1. ¿Qué es Vue.js y por qué usarlo?

Vue.js es un framework progresivo de JavaScript para construir interfaces de usuario. Es muy popular por su simplicidad y flexibilidad, ideal para principiantes que quieren comenzar en el desarrollo frontend.

Ventajas de usar Vue.js:

Sintaxis simple y fácil de entender.
Sistema reactivo que actualiza la UI automáticamente.
Componentes reutilizables.
Gran comunidad y documentación.

Ahora que sabes por qué Vue es excelente para principiantes, veamos cómo preparar tu entorno para crear tu primera aplicación lista de tareas.

2. Configuración del entorno con Vue CLI

La herramienta oficial para crear proyectos Vue es el Vue CLI, una interfaz que facilita la creación y organización del proyecto.

Paso 1: Instalar Node.js

Antes de comenzar, asegúrate de tener instalado Node.js (https://nodejs.org/).

Puedes verificarlo ejecutando en tu consola:

node -v
npm -v

node -v

npm -v

Paso 2: Instalar Vue CLI globalmente

Abre la terminal y ejecuta:

npm install -g @vue/cli

1 2	npm install -g @vue/cli

Esto instala la CLI para crear proyectos Vue fácilmente.

Paso 3: Crear un nuevo proyecto Vue

Ejecuta el comando para crear un proyecto llamado “todo-app”:

vue create todo-app

1 2	vue create todo-app

Selecciona las configuraciones predeterminadas (Default babel, eslint) para simplificar.

Paso 4: Ejecutar tu aplicación

Ingresa al directorio y lanza la app

cd todo-app
npm run serve

cd todo-app

npm run serve

Abre http://localhost:8080 en tu navegador y verás la app Vue corriendo.

¡Perfecto! Ya tienes tu entorno listo para el desarrollo.

3. Estructura del proyecto y componentes básicos

Dentro de tu proyecto, abre el directorio con tu editor favorito (Visual Studio Code recomendado).

La estructura básica es:

todo-app/
 ├─ node_modules/
 ├─ public/
 ├─ src/
 │   ├─ assets/
 │   ├─ components/
 │   ├─ App.vue
 │   └─ main.js
 ├─ package.json
 └─ babel.config.js

todo-app/

├─ node_modules/

├─ public/

├─ src/

│ ├─ assets/

│ ├─ components/

│ ├─ App.vue

│ └─ main.js

├─ package.json

└─ babel.config.js

¿Qué archivos nos interesan?

App.vue: Componente raíz.
components/: Carpeta para crear nuevos componentes reutilizables.
main.js: Entrada principal donde montamos Vue.

Vamos a crear un componente para mostrar cada tarea.

Crear componente TodoItem.vue

Dentro de src/components, crea TodoItem.vue con este código:

<template>
  <li :class="{ completed: todo.completed }">
    <input type="checkbox" v-model="todo.completed" @change="$emit('toggle', todo.id)" />
    <span>{{ todo.text }}</span>
    <button @click="$emit('delete', todo.id)">Eliminar</button>
  </li>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: Object
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

<button @click="$emit('delete', todo.id)">Eliminar</button>

</li>

</template>

export default {

name: 'TodoItem',

props: {

todo: Object

}

</script>

.completed {

text-decoration: line-through;

color: gray;

}

</style>

Explicación: Este componente representa una tarea, muestra un checkbox, el texto y un botón para eliminarla. Emite eventos para que el padre maneje la lógica.

4. Manejo del estado reactivo y lógica para la lista de tareas

Ahora vamos a manejar una lista de tareas (estado reactivo) dentro del componente principal App.vue.

Reemplaza el contenido de src/App.vue con el siguiente:

<template>
  <div id="app">
    <h1>Lista de tareas con Vue.js</h1>
    <form @submit.prevent="addTodo">
      <input
        type="text"
        v-model="newTodo"
        placeholder="Escribe una tarea..."
        required
      />
      <button type="submit">Agregar</button>
    </form>

    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle="toggleTodo"
        @delete="deleteTodo"
      />
    </ul>

    <p v-if="todos.length === 0">No hay tareas por hacer.</p>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    // Agrega nueva tarea
    addTodo() {
      const text = this.newTodo.trim()
      if (text) {
        this.todos.push({
          id: Date.now(),
          text: text,
          completed: false
        })
        this.newTodo = '' // Limpiar campo
      }
    },

    // Cambia estado completado
    toggleTodo(id) {
      const todo = this.todos.find(todo => todo.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    },

    // Elimina tarea
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style>
#app {
  max-width: 500px;
  margin: 50px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
}
form {
  margin-bottom: 20px;
}
input[type="text"] {
  padding: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 15px;
  margin-left: 10px;
  border: none;
  background-color: #42b983;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #36966e;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}
button {
  background-color: #e74c3c;
}
button:hover {
  background-color: #c0392b;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<h1>Lista de tareas con Vue.js</h1>

<input

type="text"

v-model="newTodo"

placeholder="Escribe una tarea..."

required

<button type="submit">Agregar</button>

</form>

<ul>

<TodoItem

v-for="todo in todos"

:key="todo.id"

:todo="todo"

@toggle="toggleTodo"

@delete="deleteTodo"

</ul>

<p v-if="todos.length === 0">No hay tareas por hacer.</p>

</div>

</template>

import TodoItem from './components/TodoItem.vue'

export default {

name: 'App',

components: {

TodoItem

data() {

return {

newTodo: '',

todos: []

}

methods: {

// Agrega nueva tarea

addTodo() {

const text = this.newTodo.trim()

if (text) {

this.todos.push({

id: Date.now(),

text: text,

completed: false

})

this.newTodo = '' // Limpiar campo

}

// Cambia estado completado

toggleTodo(id) {

const todo = this.todos.find(todo => todo.id === id)

if (todo) {

todo.completed = !todo.completed

}

// Elimina tarea

deleteTodo(id) {

this.todos = this.todos.filter(todo => todo.id !== id)

}

</script>

<style>

#app {

max-width: 500px;

margin: 50px auto;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

text-align: center;

padding: 20px;

border: 1px solid #ddd;

border-radius: 10px;

background: #fafafa;

}

form {

margin-bottom: 20px;

}

input[type="text"] {

padding: 10px;

width: 70%;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

padding: 10px 15px;

margin-left: 10px;

border: none;

background-color: #42b983;

color: white;

border-radius: 4px;

cursor: pointer;

transition: background-color 0.3s ease;

}

button:hover {

background-color: #36966e;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: flex;

align-items: center;

justify-content: space-between;

padding: 8px 12px;

border-bottom: 1px solid #ddd;

}

button {

background-color: #e74c3c;

}

button:hover {

background-color: #c0392b;

}

</style>

Explicación paso a paso:

Datos reactivos: todos (lista de tareas) y newTodo (texto para agregar)
Formulario: Captura el texto nuevo, al enviar llama a addTodo() que agrega un objeto tarea
Lista: Usa v-for para iterar tareas, creando un TodoItem por cada una
Eventos: El componente hijo emite toggle y delete, manejados aquí con métodos
Estilo: CSS simple para diseño agradable

5. Agregar, eliminar y marcar tareas como completadas

Ya tienes las funcionalidades principales:

Agregar: escribiendo en el input y presionando “Agregar”
Eliminar: botón rojo en cada tarea
Marcar completas: checkbox que tacha el texto

El modelo de datos se mantiene reactivo y la interfaz se actualiza automáticamente al cambiar el estado.

Este patrón es muy común en Vue para manejar interacción y estado.

6. Diseño sencillo con CSS

Ya añadimos estilos básicos para una UI limpia y agradable:

Centrado con ancho limitado
Inputs y botones con padding y colores
Tareas tachadas cuando están completadas
Efectos hover para botones

Puedes personalizar el CSS en App.vue y TodoItem.vue para ajustarlo a tu gusto.

7. Buenas prácticas en Vue.js para principiantes

Componentiza: divide la app en componentes pequeños (como hicimos con TodoItem)
Reactividad: usa data() para declarar las variables y evita mutar directamente
Eventos personalizados: usa $emit para comunicar hijos a padres
Nombres claros: componentes, variables y métodos con nombres descriptivos
Mantén separado HTML, JS y CSS: aunque Vue permite usar .vue con todo incluido, trata de mantener el código limpio y organizado

8. Conclusión y próximos pasos

¡Felicidades! Has creado una aplicación de lista de tareas usando Vue.js y JavaScript desde cero. Has aprendido sobre:

Configurar el entorno con Vue CLI
Crear componentes básicos
Usar estado reactivo para manejar tareas
Funcionalidades clave: agregar, eliminar y marcar completas
Aplicar un diseño sencillo con CSS

¿Qué puedes hacer ahora?

Agregar almacenamiento en localStorage para persistir tareas
Añadir filtros para mostrar tareas completas o pendientes
Mejorar el diseño con frameworks CSS como Tailwind o Bootstrap
Explorar Vue Router para crear páginas

Si te gustó este tutorial Vue.js, no olvides practicar y seguir aprendiendo más sobre desarrollo frontend JavaScript para mejorar tus habilidades.

¡Comparte este tutorial con otros que quieran iniciarse en la programación Vue para principiantes!

¡Gracias por leer! 🚀