Cómo Crear una ToDo List en Vue.js Tutorial

Vue.js es un potente framework de JavaScript que simplifica la creación de interfaces de usuario dinámicas. En este tutorial, aprenderás cómo crear una lista de tareas (ToDo List) usando Vue.js y Tailwind CSS. Este enfoque te permitirá comprender los conceptos fundamentales de Vue.js mientras aplicas estilos modernos con Tailwind CSS.

Introducción

Una lista de tareas es una aplicación común y útil para gestionar tareas diarias. En este tutorial, utilizaremos Vue.js para gestionar la lógica de nuestra aplicación y Tailwind CSS para aplicar estilos. Vamos a crear una aplicación simple que te permitirá añadir, marcar como completadas y eliminar tareas.

Requisitos Previos

Antes de comenzar, asegúrate de tener:

Conocimientos básicos de HTML, CSS y JavaScript.
Node.js y npm instalados en tu sistema (opcional, solo si decides usar herramientas adicionales en el futuro).

Configuración del Proyecto

Para este tutorial, utilizaremos CDNs para Vue.js y Tailwind CSS. Esto simplifica el proceso y evita la necesidad de configurar un entorno de desarrollo complejo.

Crear el Archivo HTML

Comienza creando un archivo HTML básico. Este archivo incluirá Vue.js y Tailwind CSS desde sus respectivos CDNs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js ToDo List</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Vue.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

    <!-- Vue.js App will be mounted here -->
    <div id="app"></div>

    <script>
        // Vue.js code will go here
    </script>
</body>
</html>

Implementación del Componente de Lista de Tareas

Ahora, vamos a agregar el código de Vue.js para gestionar nuestra lista de tareas. Este código se incluirá directamente en el archivo HTML.

Añadir el Código Vue.js

Dentro del archivo index.html, añade el siguiente código dentro de la etiqueta <script>:

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                newTask: '',
                tasks: []
            };
        },
        methods: {
            addTask() {
                if (this.newTask.trim()) {
                    this.tasks.push({
                        id: Date.now(),
                        text: this.newTask,
                        completed: false
                    });
                    this.newTask = '';
                }
            },
            removeTask(id) {
                this.tasks = this.tasks.filter(task => task.id !== id);
            }
        },
        template: `
            <div class="p-4 bg-white shadow-md rounded-lg w-full max-w-lg">
                <h1 class="text-2xl font-bold mb-4">My ToDo List</h1>
                <input 
                    v-model="newTask" 
                    @keyup.enter="addTask" 
                    placeholder="Add a new task" 
                    class="border p-2 w-full mb-4 rounded"
                />
                <ul>
                    <li v-for="task in tasks" :key="task.id" class="flex items-center mb-2">
                        <input 
                            type="checkbox" 
                            v-model="task.completed" 
                            class="mr-2"
                        />
                        <span :class="{ 'line-through': task.completed }" class="flex-grow">
                            {{ task.text }}
                        </span>
                        <button 
                            @click="removeTask(task.id)" 
                            class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
                        >
                            Delete
                        </button>
                    </li>
                </ul>
            </div>
        `
    }).mount('#app');
</script>

Explicación del Código

Estructura Vue.js

data: Define el estado inicial de la aplicación, incluyendo la tarea nueva y la lista de tareas.
methods: Contiene métodos para añadir y eliminar tareas.
template: Define la estructura HTML de la aplicación, utilizando la sintaxis de Vue.js para enlazar los datos y manejar eventos.

Estilos con Tailwind CSS

bg-gray-100: Aplica un fondo gris claro a la página.
bg-white: Da un fondo blanco al contenedor de la lista de tareas.
shadow-md: Añade una sombra media al contenedor.
rounded-lg: Redondea las esquinas del contenedor.
border: Añade un borde al campo de entrada.
text-2xl: Define un tamaño de texto grande para el título.
mb-4: Aplica un margen inferior a los elementos.

Probar y Desplegar la Aplicación

Para probar tu aplicación, guarda el archivo index.html y ábrelo en un navegador web. Deberías ver tu lista de tareas funcionando. Puedes añadir nuevas tareas, marcarlas como completadas y eliminarlas usando los botones correspondientes.

Cuando estés listo para desplegar tu aplicación, simplemente sube el archivo index.html a tu servidor de producción. Dado que no estamos utilizando herramientas de construcción adicionales, este archivo es todo lo que necesitas.

Conclusión

En este tutorial, hemos creado una lista de tareas utilizando Vue.js y Tailwind CSS. Has aprendido a configurar un proyecto básico con Vue.js y aplicar estilos con Tailwind CSS para crear una interfaz de usuario atractiva y funcional. Este enfoque te proporciona una base sólida para desarrollar aplicaciones más avanzadas y complejas. ¡Continúa explorando y experimentando con Vue.js y Tailwind CSS para mejorar tus habilidades de desarrollo web!