VueJS — Iniciación

Este curso está dirigido a desarrolladores web que conocen HTML, CSS y JavaScript básico y quieren dar sus primeros pasos con Vue 3. A lo largo de 8 horas los participantes explorarán la arquitectura de componentes de archivo único (SFC), comprenderán el sistema de reactividad que mantiene la vista sincronizada con el estado, y practicarán las directivas y mecanismos de binding más habituales en aplicaciones reales. El curso combina explicaciones conceptuales con ejercicios guiados en los que el alumno arrancará un proyecto Vue 3 con Vite, construirá componentes que se comunican mediante props y eventos, gestionará formularios reactivos y aplicará los hooks fundamentales del ciclo de vida de la Composition API, terminando con la capacidad de leer, depurar y corregir errores frecuentes con ayuda de Vue DevTools.

1. Reconocer la estructura interna de un componente de archivo único y explicar el papel de cada uno de sus bloques, así como describir cómo el sistema de reactividad de Vue propaga automáticamente los cambios de estado hacia la vista.
2. Poner en marcha un proyecto Vue 3 con Vite, construir plantillas que usen directivas de renderizado condicional y de lista, y vincular formularios al estado reactivo mediante binding bidireccional.
3. Integrar componentes padre e hijo con comunicación por props y eventos, gestionar el ciclo de vida con hooks de la Composition API y diagnosticar errores de compilación habituales, obteniendo una mini-aplicación funcional como resultado del curso.

Bloque 1 — Anatomía de Vue y reactividad. El curso arranca presentando el componente de archivo único (SFC) como unidad básica de construcción en Vue 3: se analiza la responsabilidad del bloque <template> como capa de presentación, del bloque <script> como capa lógica y del bloque <style> como capa de estilos encapsulados. A continuación se introduce el sistema de reactividad de Vue, rastreando paso a paso cómo una modificación en una variable ref desencadena la actualización automática del DOM a partir de un contador funcional.

Bloque 2 — Scaffolding y directivas esenciales. Los participantes crean su primera aplicación Vue 3 siguiendo el flujo de scaffolding oficial con Vite, verifican que el servidor de desarrollo arranca sin errores y exploran la estructura de carpetas generada. Sobre esa base practican las directivas de renderizado v-if, v-else y v-for para mostrar u ocultar elementos y recorrer colecciones de objetos, y trabajan el binding bidireccional con v-model en un formulario que incluye campo de texto y selector, comprobando la sincronización del estado en tiempo real.

Bloque 3 — Comunicación entre componentes y ciclo de vida. Se aborda la comunicación entre componentes padre e hijo: los alumnos pasan datos hacia el hijo mediante props y devuelven información al padre mediante $emit, siguiendo un ejercicio con estructura predefinida. Acto seguido se introduce la Composition API a través de los hooks onMounted y onUnmounted, registrando y limpiando un listener de eventos para observar el comportamiento del ciclo de vida en consola.

Bloque 4 — Depuración y consolidación. El bloque final desarrolla la competencia de diagnóstico: a partir de fragmentos de código con errores intencionados, los participantes identifican advertencias de Vue DevTools y mensajes de compilación, determinan su causa probable y aplican la corrección. El bloque sirve además como cierre integrador donde se revisita el mini-proyecto construido durante el curso para validar que todos los conceptos trabajados coexisten correctamente.

• Node.js 18 LTS o superior instalado localmente.
• npm 9+ o pnpm 8+ disponible en el PATH del sistema.
• Editor de código con soporte Vue (se recomienda VS Code con la extensión oficial Vue - Official).
• Extensión de navegador Vue DevTools (Chrome o Firefox) instalada antes del inicio del curso.
• Conexión a internet durante la sesión de scaffolding para la descarga de dependencias.

• HTML5 y CSS: capacidad de escribir marcado semántico y aplicar estilos básicos.
• JavaScript ES6+: manejo de variables const/let, funciones flecha, desestructuración, módulos (import/export) y manipulación básica de arrays.
• Uso de terminal para ejecutar comandos npm/npx y navegar por el sistema de archivos.
• Navegador con herramientas de desarrollo (DevTools) instalado y operativo.