Este libro sobre Vue.js, un framework de JavaScript, combina teoría y práctica con numerosos ejemplos. Es muy sencillo de aprender y está dirigido a cualquier desarrollador Front End que desee desarrollar aplicaciones web fluidas, dinámicas y reactivas. Conocer los lenguajes HTML, CSS y JavaScript es una ventaja adicional para comprender mejor la lectura de este libro. Hay un capítulo dedicado a JavaScript que permitirá al lector estar al día con las nuevas sintaxis que han aparecido en los últimos años.

Después de introducir los conceptos DOM virtual y arquitectura MVVM en la que se inspira Vue.js, el lector pasa rápidamente a la parte práctica instalando y configurando las herramientas de ayuda al desarrollo. Se aprende a usar Vue.js tanto en un proyecto nuevo como en uno ya existente y el lector consigue manipular el DOM de una página web, configurar los comportamientos esperados como consecuencia de las acciones del usuario e incluso administrar estilos CSS, usando directivas que introduce el framework. También se dedica un capítulo a la creación de formularios dinámicos.

En el resto del libro, el autor detalla cómo organizar su código en componentes y diseñar una aplicación en función de su tamaño, en particular, compartiendo código. El lector también aprende cómo usar el empaquetador de módulos Webpack para compilar y desplegar una aplicación en producción.

Después de recordar los conceptos de seguridad relacionados con las aplicaciones web (CORS, cookies, tokens JWT, ataques CSRF y XSS, protocolo OAuth 2.0), el autor explica cómo consumir API en su aplicación de manera segura, primero en forma de un API REST y luego en forma de API GraphQL.

Finalmente, el lector aprende el enrutamiento con Vue Router para simular las URL de la aplicación en un navegador y la centralización de la gestión de datos, usando el plug-in Vuex.


¡Nuevo! Rondas de preguntas disponibles con la versión online.

¡Ronda de preguntas
incluida en
la versión online !

• Ponga a prueba sus conocimientos al final de cada capítulo
• Evalúe sus competencias

Descargas

• Descargar los ejemplos del libro (11,750 Ko)

Introducción

1. Algunas nociones de lo que abarca este libro
2. Requisitos previos
3. Historia de Vue.js
   1. 1. ¿Por qué Vue.js?
      1. a. Sus orígenes
      2. b. Sus puntos fuertes
   2. 2. ¿Qué es el Virtual DOM?
      1. a. Definición
      2. b. API DOM para actualizar una página web
      3. c. Límites del API DOM
      4. d. Aparición del concepto de DOM virtual
      5. e. Manipulación del DOM virtual
   3. 3. El DOM virtual con Vue.js
4. Modelos de arquitectura
   1. 1. MVC (Modelo - Vista - Controlador)
      1. a. MVC para todas las aplicaciones
      2. b. MVC adaptado a las aplicaciones web
   2. 2. MVVM (Model - View - ViewModel)
5. Comparativa con otros frameworks
   1. 1. Popularidad entre Vue, React y Angular
   2. 2. Ventajas e inconvenientes
      1. a. Angular
      2. b. React.js
      3. c. Vue.js
      4. d. Un framework para cada necesidad
      5. e. Ir más lejos en la comparación conlos otros frameworks
6. Futuro de Vue.js

Nociones esenciales de JavaScript

1. Introducción
2. Bases algorítmicas
   1. 1. Variables y tipos de valores
      1. a. Declaración de una variable
      2. b. Tipos de valores
      3. c. Contextos de ejecución global y local
      4. d. Ámbito de una variable
      5. e. Conversión de tipos de datos
      6. f. Asignación por descomposición
   2. 2. Estructuras de control
      1. a. Instrucciones condicionales
      2. b. Bucles
3. Funciones
   1. 1. Definición y utilización de lasfunciones
   2. 2. Cierres (closures)
   3. 3. Función como argumento de otras funciones
   4. 4. Argumentos por defecto y argumentos del resto
   5. 5. Funciones de flecha
   6. 6. Funciones anónimas autoejecutables
4. Manipulación de arrays
   1. 1. Declarar, leer, modificar, eliminar elementos
   2. 2. Iterar en un array
   3. 3. Descomponer con el operador spread
   4. 4. Filtrar un array
   5. 5. Ordenar un array
5. Manipulación de objetos
   1. 1. Definir un objeto y su prototipo
   2. 2. Instanciar un objeto
   3. 3. Leer, añadir, modificar o eliminar una propiedad
   4. 4. Copiar o fusionar los objetos
   5. 5. Iterar sobre un objeto
   6. 6. Encadenar los métodos de objeto
6. Utilización de la palabra clave this
   1. 1. Fuera de una función
   2. 2. En una función llamada clásica
   3. 3. En una función llamada con call() y apply()
   4. 4. Con bind() para asociar un objeto a this
   5. 5. En una función llamada como métododel objeto
   6. 6. En un administrador de eventos
   7. 7. En una función de flecha
7. Gestión de excepciones
   1. 1. La utilidad
   2. 2. La estructura try…catch…finally
   3. 3. El objeto Error y los errores personalizados
8. Utilización de las promesas
   1. 1. Objeto nativo Promise
   2. 2. Método then()
   3. 3. Administradores de then()
   4. 4. Método catch()
   5. 5. Encadenamiento de procesos asíncronos conpromesas
   6. 6. Creación de promesas mantenidas o fracasadas
   7. 7. Ejecución de tareas asíncronas enparalelo
   8. 8. Gestión de la pila de llamadas
   9. 9. Funciones asíncronas con async
9. Utilización de los módulos JavaScript
   1. 1. La historia de los módulos JavaScript
      1. a. Introducción
      2. b. Aplicación sin módulo
      3. c. Objetos como módulos y funciones auto-invocadas
      4. d. Módulo CommonJS
      5. e. Módulos AMD
      6. f. Cargador de módulos
      7. g. Empaquetador de módulos
   2. 2. Los módulos ES 6
      1. a. Introducción
      2. b. Declarar y utilizar un módulo
      3. c. Evitar los conflictos de nomenclatura
      4. d. Agregar varios módulos
      5. e. Importar dinámicamente

Entender los fundamentos de Vue.js

1. Instalación
   1. 1. Una versión por entorno
   2. 2. Mediante descarga manual
   3. 3. Mediante la inclusión de un CDN (lo mássencillo)
   4. 4. Mediante npm o yarn para proyectos grandes
      1. a. Descarga del paquete vue
      2. b. Explicación de las dierentes builds
   5. 5. Mediante Vue-CLI
2. Herramientas de desarrollo
   1. 1. VS Code y sus plugins
      1. a. Instalar y configurar VS Code
      2. b. Depurar con VS Code
   2. 2. Vue Devtools
   3. 3. Vue Performance Devtool
   4. 4. CodeSandbox
   5. 5. Git
3. Instancia Vue.js
   1. 1. Hello World
   2. 2. Enlace de datos entre View y ViewModel
   3. 3. Ciclo de vida de una instancia
   4. 4. Utilización de la palabra clave this
4. Virtual DOM y reactividad
   1. 1. El sistema de unión de datos
   2. 2. El funcionamiento de la fila de espera de actualización asíncrona
   3. 3. La declaración de propiedades reactivas
   4. 4. Las limitaciones en la detección de cambios
   5. 5. Las directivas para manipular el DOM
      1. a. Un atributo HTML especial
      2. b. Los argumentos y los argumentos dinámicos
      3. c. Los modificadores
5. Unión de datos
   1. 1. Unión reactiva unidireccional
      1. a. Mostrar datos reactivos con la interpolaciónde texto
      2. b. Hacer un atributo reactivo con v-bind
   2. 2. Unión bidireccional con v-model
6. Visualizar los datos en la View
   1. 1. La interpolación con los datos máscomplejos
   2. 2. La directiva v-html
   3. 3. La directiva v-once
   4. 4. La representación condicional
      1. a. La directiva v-show
      2. b. Las directivas v-if, v-else-if y v-else
   5. 5. La etiqueta <template></template>
7. Tratamiento y formateado de los datos
   1. 1. Valores tratados con las propiedades calculadas
   2. 2. Valores tratados con los métodos
   3. 3. Propiedades calculadas vs métodos
   4. 4. Setters calculados
   5. 5. Valores procesados con observadores watch
   6. 6. Utilización de los filtros para formatearlos datos
8. Visualización de listas de datos
   1. 1. Utilizar la directiva v-for
   2. 2. Filtrar los elementos de una lista
      1. a. No usar v-if con v-for
      2. b. Usando una propiedad calculada
   3. 3. Ordenar los elementos de una lista
   4. 4. Cambiar un array o un objeto
9. Captura de eventos desencadenados por el usuario
   1. 1. Directiva v-on
      1. a. Actualizar un dato como consecuencia de un eventodel DOM
      2. b. Recuperar el evento en el método
   2. 2. Modificadores de eventos
   3. 3. Evento dinámico y sintaxis de objeto
10. Gestión de los estilos CSS
    1. 1. Scoped styles
    2. 2. Los estilos dinámicos
    3. 3. Los estilos dinámicos con un objeto
    4. 4. Los estilos dinámicos con un objeto sin CSS

Utilizar los formularios

1. Los elementos de formulario
   1. 1. La utilización de librerías de terceros
   2. 2. Los campos text y textarea
   3. 3. Las casillas de selección y los botones deradio
   4. 4. Las listas desplegables
2. Los campos particulares del formulario
   1. 1. Campo fecha
   2. 2. Campos de carga de archivo
   3. 3. Sliders
3. Los modificadores de la directiva v-model
   1. 1. Formatear una entrada de texto como número
   2. 2. Reaccionar al evento change en lugar de a input
   3. 3. Retirar los espacios
4. La validación del formulario
   1. 1. Las librerías de validación de formulario
   2. 2. Utilizar VeeValidate
      1. a. Instalar
      2. b. Utilizar las reglas de validación por defecto
      3. c. Añadir sus propias reglas de validación
      4. d. Gestionar el envío del formulario
   3. 3. Utilizar Vuelidate
      1. a. Instalar
      2. b. Utilizar las reglas de validación por defecto
      3. c. Añadir sus propias reglas de validación
      4. d. Gestionar el envío de formularios

Utilizar los componentes

1. ¿Qué es un componente?
   1. 1. Definición
   2. 2. Estructura de un componente
   3. 3. Estructuración de una aplicaciónen componentes
2. Creación de un componente
   1. 1. Manera global
   2. 2. Manera local
3. Comunicación entre componentes
   1. 1. Padre - Hijo
      1. a. Definición de los props en Vue
      2. b. Tipos de datos
      3. c. Definición de las props en el ViewModel
      4. d. Validación de las props
      5. e. Utilización de las props en el ViewModel
   2. 2. Hijo - padre
      1. a. Emitir un evento desde un componente hijo
      2. b. Escuchar un evento en el componente padre
   3. 3. Hijo - Hijo
      1. a. Límite de uso de las props y de los eventospersonalizados
      2. b. Utilizar un bus de eventos
4. Para ir más lejos
   1. 1. Las diferentes propiedades de instancia de un componente
   2. 2. Utilizar la directiva v-model en un componente
      1. a. V-model para un componente que contiene un campo detexto
      2. b. V-model para un componente que contiene una casillade verificación o un botón de radio
   3. 3. La herencia de los atributos del componente
   4. 4. Los eventos nativos para vincular al componente
   5. 5. La unión bidireccional de una prop con elmodificador .sync
5. Varios tipos de componentes
   1. 1. Los componentes dinámicos
      1. a. El elemento <component> y el atributo is</component>
      2. b. El elemento <keep-alive></keep-alive>
   2. 2. Los componentes monoarchivo
   3. 3. Los componentes básicos
   4. 4. Los componentes asíncronos para mejorar eldesempeño
   5. 5. La utilización de la función render()para la representación gráfica
   6. 6. Los componentes funcionales

Compartir las funcionalidades

1. Utilizar los slots para inyectar contenido
   1. 1. Definición
   2. 2. Slots con nombre
   3. 3. Props de slot
2. Utilizar los componentes sin representación gráfica
   1. 1. Definición
   2. 2. Creación de un componente de capturas deerror
3. Utilizar los mixins
   1. 1. Definición
   2. 2. Estrategias de fusión de las opciones
4. Utilizar los plugins
   1. 1. Definición
   2. 2. Optimización del rendimiento
      1. a. Verificar el tamaño de los plugins y su velocidadde carga
      2. b. Utilizar el tree-shaking para los plugins que lo permitan
5. Las directivas personalizadas
   1. 1. Definición
   2. 2. Argumentos y modificadores

Crear y desplegar una aplicación con Vue CLI

1. Varios tipos de aplicaciones
   1. 1. Una SPA clásica
      1. a. Definición
      2. b. Restricciones de una SPA clásica
   2. 2. Una aplicación universal (SPA + SSR)
      1. a. Definición
      2. b. Restricciones de una aplicación universal
   3. 3. Un generador de sitios estáticos
      1. a. Definición
      2. b. Arquitectura JAMstack
      3. c. Restricciones de los sitios estáticos
   4. 4. Una PWA
      1. a. Definición
      2. b. Diferentes tipos de cachés
      3. c. Restricciones de una PWA
   5. 5. Un tipo de aplicación para cada necesidad
2. Creación de un proyecto con Vue CLI
   1. 1. Presentación
   2. 2. Instalación
      1. a. Requisitos previos
      2. b. Prototipado rápido de una aplicación
      3. c. Creación de una aplicación Vue.jscompleta
   3. 3. Entender la arborescencia del proyecto
      1. a. Raíz del proyecto
      2. b. Carpeta src
      3. c. Modificación de la arborescencia para unproyecto de tamaño medio
      4. d. Modificación de la arborescencia para ungran proyecto
3. Funcionalidades de Vue CLI
   1. 1. Los plugins y los presets
      1. a. Los plugins
      2. b. Los presets
   2. 2. La recarga en caliente
   3. 3. La configuración de Webpack
      1. a. Entender el funcionamiento
      2. b. Acceder a los archivos de configuración delos diferentes modos
      3. c. Modificar la configuración
      4. d. Utilizar el API de encadenamiento para modificar demanera más precisa la configuración
   4. 4. Los modos y variables de entorno
      1. a. Los modos para cada entorno
      2. b. Las variables de entorno
   5. 5. La carpeta public
      1. a. Interpolación en los archivos HTML
      2. b. Archivos estáticos
   6. 6. La compatibilidad de los navegadores
      1. a. La lista de los navegadores compatibles
      2. b. El modo moderno
      3. c. Los controles CORS en modo moderno para los módulosES6
4. Despliegue de su aplicación en producción
   1. 1. Procedimiento de despliegue
      1. a. Compilar su aplicación con Webpack
      2. b. Previsualizar en local
      3. c. Desplegar su aplicación en un servidor
   2. 2. Despliegue simple con las plataformas PaaS
      1. a. Desplegar en Netlify
      2. b. Desplegar en Heroku
      3. c. Crear una imagen Docker con Nginx

Consumir API REST y GraphQL

1. Varios tipos de API (REST y GraphQL)
   1. 1. Definición e histórico
   2. 2. API REST
      1. a. Definición
      2. b. Restricciones de una API REST
   3. 3. API GraphQL
      1. a. Definición
      2. b. Descripción del funcionamiento
2. Seguridad y modos de autenticación
   1. 1. Principios que hay que adoptar
   2. 2. Cookie de autenticación
      1. a. Cookie de sesión
      2. b. Ataques CSRF (Cross Site Request Forgery)
      3. c. Ataques XSS (Cross Site Scripting)
   3. 3. Autenticación básica (Basic)
   4. 4. Autenticación con token al portador (Bearer)
   5. 5. Autenticación con token firmado (Bearer + JWT)
      1. a. Firma
      2. b. Principio clave privada - clave pública
      3. c. Composición de un token JWT
   6. 6. Autenticación con una clave API
      1. a. Autenticación de la aplicación porel proveedor de la API
      2. b. Problemática de seguridad en la red del usuario
      3. c. ¿Dónde conservar las claves API?
   7. 7. Autenticación con OAuth 2.0
      1. a. Un servidor de autenticación
      2. b. El problema de conservar el token
3. Crear una API rápidamente con Strapi
   1. 1. Crear el backend de su API
      1. a. Presentación
      2. b. Instalación
   2. 2. Crear el esquema de base de datos
      1. a. Presentación del panel de control
      2. b. Crear el esquema de base de datos
      3. c. Gestionar roles y permisos
   3. 3. Probar la API REST
      1. a. Probar las consultas GET, POST, PUT y DELETE
      2. b. Utilizar los argumentos para filtrar una colección
   4. 4. Probar la API GraphQL
      1. a. Utilizar Postman o el editor GraphQL de Strapi
      2. b. Recuperar los datos
      3. c. Crear un registro
      4. d. Modificar un registro
      5. e. Eliminar un registro
      6. f. Utilizar los filtros
      7. g. Funciones de agregación y cláusulagroupBy
4. Fetch y Axios para consumir API REST
   1. 1. Fetch
      1. a. Definición y uso
      2. b. Los objetos Request y Response
      3. c. Gestionar los errores
      4. d. Interrumpir una consulta
      5. e. Limitar las llamadas demasiado frecuentes con debouncey throttle
      6. f. Ejecutar consultas en paralelo
   2. 2. Crear un catálogo de productos
      1. a. Mostrar la lista de productos con fetch
      2. b. Gestionar los errores con un componente sin representación
      3. c. Compartir la funcionalidad de llamada a la API
      4. d. Implementar una paginación
      5. e. Agregar un menú desplegable para filtrarla lista por categoría
      6. f. Utilizar una barra de búsqueda
   3. 3. Axios
      1. a. Definición y uso
      2. b. Los objetos config y response
      3. c. Gestionar los errores
      4. d. Interrumpir una petición
      5. e. Utilizar los interceptores
      6. f. Centralizar la configuración axios en laaplicación
5. Apollo para consumir las API GraphQL
   1. 1. Instalación
      1. a. Instalación con Vue CLI
      2. b. Instalación manual para consumir una APIStrapi
      3. c. Instalación del plugin VS Code
   2. 2. Recuperar los datos
      1. a. Las peticiones inteligentes
      2. b. Utilizar los argumentos en la consulta
      3. c. Consulta condicional
      4. d. Modificar los datos recibidos
      5. e. Interceptar los errores
      6. f. Las opciones adicionales
   3. 3. Ubicar el código de las consultas en losarchivos .gql
      1. a. Crear un archivo .gql
      2. b. Importar un archivo .gql
      3. c. Utilizar los fragmentos
   4. 4. Crear, modificar o eliminar un recurso
      1. a. El método this.$apollo.mutate
      2. b. El componente ApolloMutation
   5. 5. Actualización del catálogo de productoscon Apollo
      1. a. Limpiar la antigua lógica de negocio de laAPI REST
      2. b. Definir las consultas GraphQL
      3. c. Definición de las consultas inteligentes

Utilizar Vue Router para la navegación

1. Definición e instalación
   1. 1. Definición
   2. 2. Instalación
      1. a. Descargar el plugin o utilizar un CDN
      2. b. Utilizar npm
      3. c. Utilizar Vue CLI
   3. 3. Declaración del router
2. Utilización
   1. 1. Definición de una ruta
   2. 2. Resolución de una ruta
   3. 3. Modo histórico
   4. 4. Visualización de los componentes en las vistasdel router
      1. a. La vista por defecto
      2. b. Las vistas con nombre
   5. 5. Navegar con ayuda de los enlaces <router-link></router-link>
      1. a. Funcionamiento
      2. b. La clase activa
      3. c. Las props de <router-link></router-link>
      4. d. Las rutas con nombre
   6. 6. Rutas dinámicas
      1. a. Utilizar segmentos dinámicos
      2. b. Recuperar los segmentos dinámicos con $route
      3. c. Utilizar los segmentos dinámicos para pasarvalores a las props de un componente
      4. d. Pasar entre dos caminos relacionados con la mismaruta
   7. 7. Las rutas anidadas
3. Navegación programada
   1. 1. Navegación programada con $router
      1. a. $router.push() y $router.replace()
      2. b. $router.forward(), $router.back(), $router.go()
   2. 2. Los interceptores de navegación
      1. a. Interceptores globales, por ruta o por componente
      2. b. Flujo de resolución durante el cambio deuna ruta a otra
      3. c. Declaración de un interceptor
      4. d. Ejemplo de uso de un interceptor global
      5. e. Ejemplo de carga de datos antes de la navegación
   3. 3. Las redirecciones
4. Para ir más lejos
   1. 1. Las transiciones
      1. a. El componente <transition></transition>
      2. b. Ejemplo de una transición entrante y quese desvanece
   2. 2. Optimización del rendimiento
      1. a. Utilización de lazy-loading con los componentesasíncronos
      2. b. Utilizar la precarga con el método webpackPrefetch

Utilizar Vuex para la gestión de estados

1. Compartir un estado global entre varios componentes
   1. 1. Problemática
      1. a. El flujo de datos unidireccional
      2. b. Utilizar props y eventos para compartir y accederal estado global
      3. c. Utilizar un bus de eventos para reaccionar a las acciones
   2. 2. Utilizar una store para centralizar los datos
      1. a. Delegar los estados a un objeto compartido
      2. b. Trazar las mutaciones
      3. c. Utilizar Vuex
2. Instalar y utilizar store Vuex
   1. 1. Instalación
      1. a. Con un CDN
      2. b. Con npm o yarn
      3. c. Con Vue CLI
   2. 2. Estado
      1. a. Definir y acceder a un dato del estado
      2. b. Utilizar mapState() para generar las propiedades calculadas
   3. 3. Getters
      1. a. Acceder a un dato del estado a través deun getter
      2. b. Utilizar mapGetters() para generar las propiedadescalculadas
   4. 4. Setters
      1. a. Modificar un dato del estado de la store
      2. b. Modificar varios datos con una mutación
      3. c. Modificar un objeto o un array
      4. d. Utilizar un archivo de constantes para listar lostipos de mutaciones
      5. e. Utilizar mapMutations() para generar las propiedadescalculadas
      6. f. Las mutaciones con la directiva v-model
   5. 5. Acciones
      1. a. Utilizar las acciones para los tratamientos asíncronos
      2. b. Utilizar mapActions para generar los métodos
      3. c. Encadenar las acciones asíncronas
3. Utilizar los módulos para organizar su store
   1. 1. Separar el store en varios archivos
   2. 2. Utilizar los módulos Vuex

Conclusión

1. Conclusión