Esta guía te lleva, de menos a más, por los tests de la app de ejemplo
00-test-pinia (Vue 3 + Vite + Pinia). La idea no es que memorices comandos,
sino que entiendas qué estás probando y por qué en cada caso.
Léela con el proyecto abierto al lado: cada sección apunta a un archivo real que puedes mirar y ejecutar.
En esta clase vas a practicar cómo leer e interpretar una API REST antes de consumirla desde Vue. Trabajarás con URLs, verbos HTTP, respuestas JSON y la herramienta Postman para probar peticiones manualmente.
Nos enfocaremos en lo esencial:
GET, POST, PUT, PATCH, DELETE) y su relación con CRUD.
| /* Si <Transition name="fade">, Vue usará el prefijo .fade */ | |
| /* Estado inicial de entrada: cómo parte el elemento antes de aparecer */ | |
| .fade-enter-from {} | |
| /* Estado activo de entrada: define la transición/animación mientras entra */ | |
| .fade-enter-active {} | |
| /* Estado final de entrada: cómo queda el elemento al terminar de aparecer */ | |
| .fade-enter-to {} |
En esta clase vas a practicar cómo reaccionar a lo que hace el usuario: clics, teclas y envíos de formulario. Vue resuelve esto con la directiva @evento (abreviación de v-on:evento) directamente en el template.
Nos enfocaremos en lo esencial:
@click para escuchar clics.@click="contador++") y manejadores con funciones (@click="incrementar").$event para acceder al evento original del navegador.
Esta clase marca la transición desde CDN hacia el entorno profesional: en lugar de un index.html con un <script> cargado por CDN, cada ejercicio (excepto el primero) se resuelve dentro de un proyecto creado con create-vue que usa Vite como motor de desarrollo, pnpm como gestor de paquetes y componentes .vue (SFC) con la sintaxis <script setup>. Los ejercicios profundizan en directivas que aún no se han usado (v-once, v-html), en la anatomía de una directiva (directiva:argumento="expresión"), en los modificadores (.prevent, .stop, .trim, .number) y en formas avanzadas de v-for (alias con índice, iteración sobre objetos, uso correcto de :key). La consigna final reúne todo en una mini-app al estilo del ejemplo guiado (Rick & Morty).
Antes de escribir cualquier componente, ha
Esta guía describe paso a paso cómo crear un proyecto Vue 3 utilizando el scaffolding oficial de Vue (create-vue), tanto con pnpm como con npm, y explica la función de cada archivo y carpeta que se genera.
Antes de comenzar, asegúrate de tener instalado:
Cada solución debe ser un index.html con Vue 3 cargado desde CDN (<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>) y un assets/js/app.js separado, siguiendo la Composition API: setup() como punto de entrada y ref() para los datos reactivos. Estos ejercicios profundizan en las directivas que enlazan datos al template (v-bind, v-model, :class) y en el renderizado condicional con múltiples ramas (v-if / v-else-if / v-else). Los conceptos de v-on, v-for y v-show ya vistos en la lección anterior siguen apareciendo como soporte.
Cuando un atributo HTML necesita su valor desde una variable de JavaScript, se usa la directiva v-bind:atributo (atajo: :atributo). Sin v-bind, lo que está entre comillas se trata como texto literal. Con v-bind, Vue evalúa la expresión y asigna el resultado al atributo. Es la fo
| const quotes = [ | |
| { | |
| quote: "One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.", | |
| author: "Inscription of the One Ring", | |
| }, | |
| { | |
| quote: "You shall not pass!", | |
| author: "Gandalf, The Fellowship of the Ring", | |
| }, | |
| { |
Cada solución debe ser un index.html con Vue 3 cargado desde CDN (<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>) y un assets/js/app.js separado. A partir del ejercicio 2 se utiliza la Composition API: setup() como punto de entrada de la lógica y ref() para declarar datos reactivos. Toda variable que deba reflejarse en pantalla se crea con ref(), se modifica con .value desde JavaScript y se expone al template mediante return { }.
Vue es un framework progresivo de JavaScript que toma el control de una parte del DOM y se encarga de actualizar la pantalla cuando los datos cambian. Para usarlo desde CDN, el script expone el objeto global Vue, del que puedes desestructurar createApp. La función createApp(opciones) recibe un objeto de configuración; la opción template acepta un string con el HTML que Vue debe renderizar. Llamar .mount("#id") conecta la app al elemento HTML con
Cada solución debe incluir un pequeño index.html con los botones y un contenedor (<section>, <div> o <ul>) donde renderizar los resultados, y un main.js con las funciones, los addEventListener y las llamadas a fetch. Usa siempre textContent y createElement para escribir en el DOM (nunca innerHTML con strings concatenados). Cuando un ejercicio pida observar la respuesta cruda, abre la consola del navegador (F12) antes de hacer clic.
La API que vamos a usar en casi todos los ejercicios es la Studio Ghibli API en https://ghibliapi.vercel.app/films, que devuelve un arreglo de objetos con campos como id, title, original_title, description, director, producer, release_date y running_time.
Una API REST es un puente entre dos sistemas: tu navegador (el cliente) le pide datos a un servidor mediante una URL llamada endpoint, y el servidor responde con un paquete de datos en formato JSON. L