Aprender Vue

Table of contents

1. Prefacio
   1. Convenciones utilizadas en este libro
   2. Utilizar ejemplos de código
   3. Aprendizaje en línea O'Reilly
   4. Cómo contactar con nosotros
   5. Agradecimientos
2. 1. ¡Bienvenido al mundo Vue.js!
   1. ¿Qué es Vue.js?
   2. Las ventajas de Vue en el desarrollo web moderno
   3. Instalar Node.js
      1. MNP
      2. Hilo
   4. Herramientas para desarrolladores de Vue
   5. Vite.js como herramienta de gestión de constructores
   6. Crear una nueva aplicación Vue
   7. Estructura del repositorio de archivos
   8. Resumen
3. 2. Cómo funciona Vue: Lo básico
   1. DOM virtual bajo el capó
      1. El problema de la actualización del diseño
      2. ¿Qué es el DOM virtual?
      3. Cómo funciona el DOM virtual en Vue
   2. La Instancia de Aplicación Vue y la API de Opciones
   3. Explorar la API de Opciones
   4. La sintaxis de la plantilla
   5. Crear estado local con propiedades de datos
   6. Cómo funciona la reactividad en Vue
   7. Encuadernación bidireccional con modelo en v
   8. Uso del modificador v-model.lazy
   9. Vincular datos reactivos y pasar datos de apoyo con v-bind
   10. Vinculación a atributos de clase y estilo
   11. Iterar la recogida de datos con v-for
       1. Iterar por las propiedades de los objetos
       2. Haz que el enlace del elemento sea único con el atributo clave
   12. Añadir receptor de eventos a elementos con v-on
       1. Manejar eventos con modificadores de eventos v-on
       2. Detección de eventos de teclado con modificadores de código de tecla
   13. Elementos de representación condicional con v-if, v-else y v-else-if
   14. Elementos de visualización condicional con v-show
   15. Mostrar dinámicamente código HTML con v-html
   16. Mostrar contenido de texto con v-text
   17. Optimizar los renderizados con v-once y v-memo
   18. Registrar un componente globalmente
   19. Resumen
4. 3. Componer componentes
   1. Estructura del componente de archivo único Vue
   2. Uso de defineComponent() para la compatibilidad con TypeScript
   3. Ganchos del ciclo de vida de los componentes
      1. configurar
      2. antesCrear
      3. creado
      4. beforeMount
      5. montado
      6. beforeUpdate
      7. actualizado
      8. antesDesmontar
      9. sin montar
   4. Métodos
   5. Propiedades calculadas
   6. Observadores
      1. Observar los cambios en las propiedades anidadas
      2. Utilizar el método this.$watch()
   7. El poder de las tragaperras
   8. Utilizar ranuras con nombre con la etiqueta de plantilla y el atributo v-slot
   9. Comprender a los árbitros
   10. Compartir la configuración de componentes con mixins
   11. Componentes de estilo de alcance
       1. Aplicar CSS a un Componente Hijo en Estilos Abarcados
       2. Aplicar Estilos de Ámbito al Contenido de la Ranura
       3. Acceder al valor de los datos de un componente en la etiqueta de estilo con la pseudoclase v-bind()
   12. Estilizar componentes con módulos CSS
   13. Resumen
5. 4. Interacciones entre componentes
   1. Componentes anidados y flujo de datos en Vue
      1. Utilizar apoyos para pasar datos a componentes hijos
      2. Declarar tipos prop con validación y valores por defecto
      3. Declarar objetos con comprobación de tipos personalizada
      4. Declarar objetos utilizando defineProps() y withDefaults()
   2. Comunicación entre componentes con eventos personalizados
   3. Definir eventos personalizados con defineEmits()
   4. Comunicarse entre componentes con el patrón proporcionar/inyectar
      1. Utilizar provide para pasar datos
      2. Utilizar inject para recibir datos
   5. API de teletransporte
      1. Implementación de un modal con teletransporte y el elemento <diálogo>.
      2. Problema de renderizado con teletransporte
   6. Resumen
6. 5. Composición API
   1. Configurar componentes con la API de composición
   2. Manejo de datos con ref() y reactivo()
      1. Utilizar ref()
      2. Utilizar reactive()
   3. Uso de los ganchos del ciclo de vida
   4. Comprender los observadores en la API de composición
   5. Utilizando computed()
   6. Crear tus composibles reutilizables
   7. Resumen
7. 6. Incorporación de datos externos
   1. ¿Qué es Axios?
   2. Instalación de Axios
   3. Cargar datos con ganchos de ciclo de vida y Axios
   4. Solicitudes de datos asíncronas en tiempo de ejecución: el reto
   5. Crear tu componente Fetch reutilizable
   6. Conecta tu aplicación con una base de datos externa
   7. Resumen
8. 7. Renderizado avanzado, componentes dinámicos y composición de plugins
   1. La función Render y JSX
      1. Uso de la función Renderizar
      2. Utilizar la función h para crear un VNode
      3. Escribir JavaScript XML en la función Renderizar
   2. Componente funcional
   3. Definición de Props y Emits para Componente Funcional
   4. Añadir funcionalidades personalizadas globalmente con plugins Vue
   5. Renderización dinámica con la etiqueta <componente>.
   6. Mantener viva la instancia del componente con <keep-alive>.
   7. Resumen
9. 8. Enrutamiento
   1. ¿Qué es el encaminamiento?
   2. Uso del router Vue
      1. Instalación del router Vue
      2. Definir rutas
      3. Crear una instancia de router
      4. Conectar la instancia del router a la aplicación Vue
      5. Renderizar la página actual con el componente RouterView
      6. Construye una Barra de Navegación con el Componente RouterLink
   3. Pasar datos entre rutas
   4. Desacoplamiento de parámetros de ruta mediante apoyos
   5. Comprender los Guardias de Navegación
      1. Guardias de Navegación Global
      2. Guardias de navegación a nivel de ruta
      3. Protectores de router a nivel de componente
   6. Crear rutas anidadas
   7. Crear rutas dinámicas
   8. Avanzar y retroceder con la Instancia Router
   9. Manejo de rutas desconocidas
   10. Resumen
10. 9. Gestión del Estado con Pinia
    1. Comprender la gestión de estados en Vue
    2. Comprender a Pinia
    3. Creación de una tienda de pizzas para Pizza House
    4. Crear una tienda de carritos para Pizza House
    5. Utilizar el Carrito Tienda en un Componente
    6. Añadir artículos al carrito desde la Galería de Pizzas
    7. Mostrar artículos del carrito con acciones
    8. Eliminar artículos de la Cesta Tienda
    9. Pruebas unitarias Tiendas Pinia
    10. Suscripción Efectos secundarios en los cambios de tienda
    11. Resumen
11. 10. Transición y animación en Vue
    1. Comprender las transiciones CSS y las animaciones CSS
    2. Componente de transición en Vue.js
       1. Uso de atributos de clase de transición personalizados
       2. Añadir efecto de transición en el renderizado inicial con aparecer
    3. Construir la transición de un grupo de elementos
    4. Crear transiciones de ruta
    5. Utilizar eventos de transición para controlar la animación
    6. Resumen
12. 11. Pruebas en Vue
    1. Introducción a las pruebas unitarias y a las pruebas E2E
    2. Vitest como herramienta de pruebas unitarias
    3. Configuración de Vitest mediante parámetros y archivo de configuración
    4. Escribir tu primer test
    5. Pruebas de materiales compuestos sin ciclo de vida
    6. Probar los Componibles con el Gancho del Ciclo de Vida
    7. Probar componentes con las utilidades de prueba de Vue
    8. Probar la interacción y los eventos de un componente
    9. Utilizar Vitest con una GUI
    10. Utilizar Vitest con un corredor de cobertura
    11. Pruebas de extremo a extremo con PlaywrightJS
    12. Depuración de pruebas E2E mediante la extensión de pruebas Playwright para VSCode
    13. Resumen
13. 12. Integración Continua/ Implementación Continua de Aplicaciones Vue.Js
    1. CI/CD en el desarrollo de software
       1. Integración continua
       2. Entrega continua
       3. Implementación continua
    2. Canalización CI/CD con acciones de GitHub
    3. Implementación continua con Netlify
    4. Implementación con Netlify CLI
    5. Resumen
14. 13. Renderizado del lado del servidor con Vue
    1. Renderizado del lado del cliente en Vue
    2. Renderizado del lado del servidor (SSR)
    3. Renderizado del lado del servidor con Nuxt.Js
    4. Generador lateral estático (SSG)
    5. Últimas palabras
15. Índice
16. Sobre el autor