Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
¿Se ha planteado en algún momento desarrollar aplicaciones SPA pero no ha sabido con qué framework iniciarse? Existen muchos, ¿verdad? Si le contara que la curva de aprendizaje de desarrollar aplicaciones en Vue es mucho menor que el tiempo invertido en aprender React o Angular, ¿se animaría? Vue, pese a llegar el último al mercado, ha adoptado las buenas prácticas de Angular y React, además de aportar su granito de arena. Con Vue rápidamente podrá desarrollar desde las aplicaciones más sencillas hasta las más complejas. Solo deberá aprender el framework e incorporar otros conocimientos, como TypeScript. Gracias a los 100 ejercicios prácticos de este libro: o Aprenderá los principios básicos de Vue o Estudiará el framework o Conocerá el desarrollo orientado a componentes o Aprenderá la comunicación entre eventos o Utilizará almacenes de estados de los componentes mediante Vuex o Conectará con servidores remotos mediante Axios o Estudiará los distintos modos de compilación de aplicación y componentes o Reutilizará los componentes desarrollados en Vue, en otros frameworks o Realizará pruebas unitarias mediante Jest Si ya conoce otros frameworks, verá que Vue tiene muchas similitudes con el resto y le costará muy poco aprenderlo. Si no conoce ninguno, solo necesita saber JavaScript y HTML. Fácil, ¿no? ¡Anímese y aprenda Vue de un modo sencillo!
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 181
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Aprender VueJS con 100 ejercicios prácticos
© 2020 Ángel Vazquez Vazquez y Ramón Serrano Valero
© 2020 MARCOMBO, S.L.
www.marcombo.com
Diseño de la cubierta: Giancarlo Salinas
Director de colecciión: Pablo Martínez Izurzu
Directora de producción: M.ª Rosa Castillo Hidalgo
Maquetación: María Paz Mora Encinas
Correctora: Laura Seoane
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.»
ISBN: 978-84-267-2802-9
Producción del ebook: booqlab.com
APRENDER VUEJS CON 100 EJERCICIOS PRÁCTICOS
Los 100 capítulos que contiene este libro realizan un recorrido por los principios de desarrollo utilizando el framework de Vue. Es recomendable realizar los ejercicios en orden, sobre todo a partir del ejercicio 40, donde empieza la aplicación SPA mediante el CLI. Puede apoyarse en los ejercicios, ya implementados subidos en la plataforma Marcombo, plenamente funcionales.
Una vez finalizado este libro, el lector habrá adquirido el conocimiento para crear su propia aplicación SPA, habilitándole para afrontar proyectos en esta tecnología. Tendrá capacidad de crear aplicaciones rápidamente, mejorar su pensamiento crítico a la hora de abordar un nuevo desarrollo, así como la habilidad para tomar como base la arquitectura propuesta y poder mejorarla conforme nuevos conocimientos sean incorporados.
A QUIÉN VA DIRIGIDO
A todo aquel que busque iniciarse en el desarrollo web, la programación o adentrarse en el mundo de este nuevo framework Vue.
También está dirigido a aquellos que ya hayan realizado sus primeros pasos con Vue, pues en este libro encontrarán las respuestas a las dudas que les surjan y aquellas que no hayan podido resolver hasta ahora.
LA FORMA DE APRENDER
Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre los temas tratados en los ejercicios.
LOS ARCHIVOS NECESARIOS
En la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá descargar de forma gratuita los contenidos adicionales del libro en www.marcombo.info.
Ramón: Ha sido duro compaginar el mundo laboral con el Máster en Big Data y la escritura de este libro, sin embargo, gracias al apoyo de mi mujer Sara de la V., he podido sacar fuerzas para poder finalizar este libro, ¡eres mi fuerza, siempre sacas lo mejor de mi! Agradezco a mis padres por inculcarme el espíritu de esfuerzo. A Xavi y Martín, mis sobrinos, que, algún día, cuando comprendan este libro, aprendan este framework y los nuevos que aparezcan. A mi amigo Ángel V., una mente siempre activa, preparado para cualquier reto, un placer escribir junto a ti. A Gabriel G. por años compartiendo conocimientos que nos permitieron innovar. Así como a mis compañeros Miguel N. y Alonso V. por habernos aventurado juntos en este mundo Vuetizado.
Ángel: Este libro es para las personas que me rodean: mis padres que siempre me apoyan, mis amigos y compañeros, mis gatas que tanta compañía me hicieron a la hora de trabajar en este libro, ¡y para tí, Lucía!
Mención especial para mi compañero Ramón con el que colaboro ya por tercera vez en este tipo de aventuras. ¡Gracias por hacer tan fácil trabajar contigo, nano!
No pudisteis estar presentes Juanto G. y Pablo F. en este libro, pero formáis parte de este equipo, esperamos abordar nuevos retos juntos de nuevo.
¡Hola, Vue!
Configurar el entorno
Instancia Vue
Instancias Vue
Ciclo de vida
Data binding
Watch
Computed properties
Métodos
Componentes de la instancia
Eventos
Renderizar HTML
Vincular propiedades
Condicionales
Listas
Enumeración de propiedades
Filtros
Renderizar solo una vez
Mouse move
Directivas personalizadas
Directivas personalizadas II
Directivas personalizadas III
Directivas personalizadas IV
Componente
Componente parametrizables
Componente Tipo Propiedades
Cambiar valor de props
Reactividad Data
Reactividad NextTick
Directiva v-show vs v-if
Bucle v-for y key
Bucle atributos y rango
Peticiones Fetch
Contexto This
Promesas
Conjunto de Promesas
Inline templates
Slots
Transiciones/Animaciones I
Transiciones/Animaciones II
Instalación NodeJs
Nuevo proyecto con Vue CLI 3
Estructura del proyecto
Compilar en desarrollo y producción
Variables de entorno y ejecución
CLI Service scripts y servidor http
Componente – App, Librería y WC
Despliegue en Servidor de Aplicaciones
Instalación Vue Router y Modos
Carga óptima de Ruta y navegación
Rutas dinámicas
Rutas anidadas
Navegación desde código
Protección global de rutas
Protección en ruta y componente
Vuetify Diseño menú lateral
V-Toolbar y rutas de navegación
Crear Tablas
Selección de filas en tabla
Comunicación Hijo a Padre y Snackbar
Diseñar y visualizar ficha
Vuex, primeros pasos
Vuex – Getters
Vuex – Mutaciones
Vuex – Acciones
Vuex – Módulos
Vuex Plugin Logger
Vuex – Persistencia estados al refrescar
Vuex – Persistencia en Cookies
Vuex – Subscriptores
Axios – Comunicación con Servidor
Axios – Cancelar solicitud
Axios – Interceptor de solicitudes
Axios – Interceptor Respuestas
Axios – Post
Axios – PUT
Axios – Delete
Comunicación – Padre – Hijo
Comunicación – Hijo – Padre
Comunicación – Hijo – Padre por Callback
Comunicación – Entre hermanos
Comunicación – Bus de eventos
Comunicación – Mensajería Global
Comunicación bidireccional
Formulario – Campo Texto
Formularios – Email con validación
Formularios – Fechas moment
Formularios – Opciones Checkbox
Formularios – Opción única Radiobutton
Formularios – Combobox
Formularios – Campo Personalizado
Formularios – Validación Vuelidate
Formularios – Validación personalizada
Pruebas Unitarias – Jest
Pruebas Unitarias – Creación
Pruebas Unitarias – Props
Pruebas Unitarias – Aislar componentes
Pruebas Unitarias – Mock de Vuex
Pruebas Unitarias – Router
Pruebas desde UI
¡Bienvenidos a Vue, queridos lectores! En este ejercicio veremos cómo empezar a trabajar con Vue con el mínimo esfuerzo, pero en primer lugar daremos algunas pinceladas sobre Vue.
¿Qué es Vue? Vue es un framework progresivo para construir interfaces de usuario [1].
¿Qué significa progresivo? Simplemente que está modularizado de manera que su librería principal está enfocada solo a la parte visual y, usándola en conjunto con otras librerías o proyectos, puede construir fantásticas aplicaciones web SPA. Esto significa que Vue no es un todo o nada sino que puede escoger las partes que más le interesen e incluso usarlas conjuntamente con otros frameworks o librerías web.
Para ilustrar el concepto de progresivo vamos a importar lo mínimo necesario para crear nuestra primera aplicación.
En primer lugar, vamos a utilizar un editor online como JSFiddle (https://jsfiddle.net/) y en la ventana de HTML añadiremos el siguiente contenido [2].
Tenemos nuestro “Hola Vue” que renderiza una página de forma estática. Para trabajar de forma dinámica añadiremos los scripts necesarios para importar la librería de Vue [3].
En la ventana del editor para el código Javascript añadimos la instancia de Vue, la ligamos al elemento con id #app y añadimos una variable en el bloque data denominada message[4].
Volviendo al HTML asociamos a uno de los elementos el id que hemos declarado en la parte de Javascript [5]. ¡Dentro de este elemento añadimos un título (h1) con la variable message y ya tenemos nuestro “¡Hola Vue!”
¡Así de fácil ha sido crear nuestra primera aplicación y de forma online! En siguientes ejercicios configuraremos nuestro entorno en local para trabajar cómodamente y con la ayuda de múltiples herramientas para el desarrollo web.
Comenzaremos este viaje de aprendizaje configurando un entorno que nos facilite el desarrollo de nuestras aplicaciones. Para este libro como editor hemos elegido Atom pero podría utilizar cualquier otro con el que se sienta cómodo.
En primer lugar, vamos a la página de Atom (https://atom.io/ )[1] y una vez descargado instalamos [2] y lo iniciamos [3] y a partir de este momento ya tenemos un editor para nuestro código.
Esto no se acaba aquí, querremos tener también a nuestro alcance las herramientas que nos hagan desarrollar nuestras aplicaciones más cómoda y rápidamente, con lo que vamos a añadir algunos plugins.
Para ello iremos a la vista de ajustes en la que podremos buscar y seleccionar plugins para su instalación [4]. Entre la ingente cantidad de herramientas que podremos añadir a nuestro editor nosotros hemos elegido algunas que pueden ser útiles. Sin embargo, utilice tantas como quiera y necesite para sentirse cómodo ya que esta es una elección muy personal.
Entre las que hemos seleccionado están language-vue [5] que resalta la sintaxis de vue, vue-format [6], atom-beautify [7] que dan formato a nuestro código y atom-html-preview [8] que integra dentro de nuestro editor una ventana para renderizar el contenido automático de código en vivo.
De esta forma, si retomamos los archivos de nuestra primera aplicación, podremos trabajar cómodamente en nuestro editor local con todos los plugins para la ayuda al desarrollo y el renderizado HTML integrado [9].
Vamos a construir un pequeño blog de viajes y, para ello, como hemos visto en anteriores ejercicios, creamos la instancia Vue que manejará el contexto del elemento con id #app asociado [1].
Dentro de este elemento crearemos un título general y una serie de artículos con un pequeño titular y contenido [2]. De esta forma definimos una plantilla para nuestro blog y para la que nos faltaría añadir contenido. Este contenido variará, con lo que como primera aproximación crearemos unas cuantas variables dentro de la instancia Vue que representarán los textos que hayamos escrito sobre nuestros últimos viajes.
Tenemos nuestro pequeño blog de viajes listo para añadir contenido, este contenido podría cargarse en las variables desde alguna fuente externa tanto para imágenes como para texto, pero como primer paso simplemente representamos el valor contenido dentro de las variables de la instancia Vue [3].
Esto Vue lo realiza así de fácil, podemos considerar el data como el lugar donde definimos las variables del modelo con las que trabaja nuestra instancia de Vue. Hasta ahora la definición de estos valores se realiza de forma estática, ya veremos más adelante cómo podemos ir modificando estos valores dentro de la instancia, donde su valor se reflejaría automáticamente en la plantilla, al haber sufrido un cambio, esto es propio de la reactividad de Vue. ¡Genial!
En nuestro blog de viajes además de una colección de artículos queremos añadir un pequeño índice con información sobre los títulos y en qué fecha se publicaron. Con este fin podemos añadir una nueva instancia de Vue que controle este componente índice.
Partimos de nuestro ejemplo anterior [1] creando una nueva columna en la parte derecha con nuestro nuevo componente. Este nuevo elemento contendrá una lista no ordenada de títulos con fecha de publicación, y para ello crearemos el HTML adecuado y lo identificamos con el id app2.
La segunda parte del ejercicio será crear una nueva instancia Vue en el código Javascript con la que manejar nuestro nuevo componente. Hasta este momento tenemos declarada una lista con elementos en HTML con una variable por ítem de la lista y ahora declararemos y daremos valores a todas y cada una de ellas [2[[ [3[].
Hemos creado nuestro blog de artículos de viaje y lo hemos completado con la creación de un pequeño índice resumen con títulos y fechas. Comprobamos así que pueden convivir varias instancias Vue, una para cada componente, sin ningún problema.
Se denomina ciclo de vida de una instancia Vue a una serie de estados por los que va pasando el componente. Estos estados son básicamente cuatro: created, mounted, updated y destroyed.
Vue nos permitirá definir acciones anteriores y posteriores a la transición desde o hacia cada estado interno del componente. Los métodos en cuestión para implementar estas acciones son:
•beforeCreate: evento lanzado antes de tener el componente cargado, implica no poder acceder al componente a nivel de Dom.
•created: evento donde se verifica si el componente tiene plantilla, entonces se compila y se observan las propiedades computadas, data, métodos y eventos. Pero no podemos acceder al $el.
•beforeMount: evento que ocurre antes de representar el componente.
•mounted: evento que implica que el componente está cargado por completo, se añade al DOM, quedando el componente accesible a través de $el.
•beforeUpdate: evento que se ejecuta cuando el valor del data del componente cambia.
•updated: evento invocado tras finalizar la modificación de valor del data.
•beforeDestroy: evento que elimina eventos que estuvieran activos en el componente, antes de eliminar la instancia.
•destroyed: evento lanzado tras desacoplar el componente.
En estos métodos podremos reservar o liberar recursos, realizar cálculos, hacer llamadas http, etc.
Para ilustrar mejor cómo funciona el ciclo de vida implementaremos cada uno de estos métodos escribiendo en una consola del navegador un mensaje por cada vez que entre en los métodos mencionados [1].
Una vez que carga la página vemos que la instancia es creada, cargada en el DOM y está disponible cuando pasa al estado mount [2].
Para comprobar qué pasa cuando actualizamos el componente podemos editar el texto ”Hola Vue!” [3] y añadir alguna modificación para ver que pasa por los métodos beforeUpdate y updated [4].
En el caso de que eliminemos el componente podremos forzar su destrucción a través del botón Destroy comprobar que la instancia pasa por los métodos beforeDestroy y destroyed [5].
Volvemos de nuevo con nuestro blog de viajes, en esta ocasión además de listar los artículos escritos y el índice querremos añadir un pequeño apartado para editar nuevos artículos.
En primer término, crearemos un input para escribir un título para nuestro artículo y una caja de texto más amplia para poder escribir todo nuestro artículo en la misma [1].
Además de crear el marcado en lenguaje HTML añadiremos a cada input un nuevo atributo con el siguiente formato v-model=”nombreVariable” para enlazar la variable con el contenido que escribamos. Del mismo modo tendremos que declarar esas variables con los nombres que habremos elegido en el código Javascript de la instancia Vue [2].
Posteriormente añadiremos el título y el contenido en la página para que se renderice a medida que se escribe y podamos ir viendo cómo queda [3]. Esta es la “magia” del enlazado de variables con los inputs ya que somos capaces de darle un valor a una variable dentro de la instancia e ir mostrando lo que guarda esa variable dentro del contexto de nuestra instancia. [4]
Simplemente con estos pasos tendremos una forma fácil de añadir un nuevo artículo con su título y contenido y poder ver el renderizado en la página inmediatamente a medida que vamos generando contenido[5].
Hasta ahora hemos visto cómo hacer el enlazado entre las variables y su contenido y la renderización en la web de los cambios. Hemos hablado de las variables de la instancia de Vue: cómo declararlas, manejarlas y mostrar su contenido.
Para observar una propiedad lo único que tendremos que hacer es declarar dentro en la instancia una variable dentro del bloque watch. El bloque watch se define como un objeto, y cada variable dentro del mismo es una función con el mismo nombre, con lo que cada vez que la variable cambie se ejecutará una función con dos argumentos: un valor antes del cambio y el nuevo valor.
Para ilustrar este concepto en este ejercicio veremos cómo observar variables de la instancia y mostrar su resultado. Compondremos una nueva página con un input y veremos cómo cambia la propiedad observada visualizándolo en una consola dentro de la propia página.
En el apartado del HTML tenemos nuestro título de página y un input para meter texto libre que enlazamos con el atributo v-model [1], y en el apartado del código Javascript creamos un bloque watch en el que observamos la variable message además de escribir la función que se ejecutará cuando cambie su valor [2].
Vemos que cada vez que hacemos cambios en el texto [3] se ejecuta la función con el valor antes del cambio y el nuevo valor [4].
Watch permite detectar cambios en los valores que se les proporciona a componentes hijos a través de las “props”, detectando cambios en el valor proporcionado en sus props, para finalmente refrescar el valor del componente, aunque este uso lo veremos con más detalle en otros ejercicios.
Hasta ahora hemos manejado propiedades y métodos de la instancia. Sabemos cómo declarar propiedades, cómo modificarlas y con ello vemos cómo se renderizan automáticamente de nuevo en la página.
En este ejercicio veremos cómo usar las computed properties que nos dan un punto extra de eficiencia ya que solo se evaluarán en el momento que afecte a alguna parte de su cálculo.
Imaginemos que tenemos una pequeña calculadora de sumas y restas en la que tenemos cuatro inputs que se corresponden con los diferentes operandos involucrados [1].
Contamos con cuatro propiedades en el apartado data y dos métodos diferentes encargados de hacer el cómputo correspondiente y mostrarnos el resultado [2].
Ahora mismo si editamos alguno de los operandos vemos que se efectúa el cálculo y se muestra el resultado después del signo igual. Hasta aquí es lo que se espera de nuestra calculadora personal, ¿no? Sin embargo, si vamos al detalle de cómo se efectúan los cálculos revisando la consola, podemos comprobar que cada vez que modificamos un solo operando se hacen los cálculos de todas las operaciones que tengamos declaradas.
Para nuestro caso quizá no es algo muy crítico desde el punto de vista de la eficiencia, pero nos vale para ver que, si se hiciera algún cálculo costoso, este repetiría fuese cual fuese el cambio en la instancia [3].
Para evitar este recálculo haremos uso de las computed properties simplemente sustituyendo el bloque de methods por un bloque computed y cambiar las llamadas para el cálculo de los resultados como si fueran propiedades de la instancia [4].
Con esta modificación podemos comprobar que si modificamos alguno de los operandos solo se volverán a calcular aquellas operaciones en las que ese operando esté involucrado, mientras que el resto no se recalcularán [5].
Para comprobar cómo se hace el recálculo utilizaremos el operando 2 en ambas propiedades computadas, con lo que podremos jugar y ver qué es lo que se recalcula en función del operando que modifiquemos [6].
Dentro de una instancia Vue además de las propiedades se exponen métodos que operan sobre los datos o ejecutan acciones. Los métodos se ejecutan cada vez que las invocamos, cosa que no ocurre con las propiedades computadas, ejecutadas cada vez que alguna de las variables utilizadas en la obtención de un resultado en las propiedades computadas cambia su valor; en dicho caso se ejecutaría la propiedad, para recalcular.
Estos métodos se declaran dentro de la instancia dentro del bloque methods, y se pueden asociar a los elementos HTML de la instancia.
En este ejercicio vamos a relacionar un componente de tipo botón con una acción que se corresponderá con un método declarado en la instancia Vue. Para indicar esta relación usamos la directiva v-on que se coloca dentro del HTML del botón y el evento (en este caso el evento de click).
<button type=”button” v-on:click=”showMessage”>Mostrar Título</button>
Una vez dado este paso creamos un bloque methods en la instancia y dentro de este creamos la función showMessage que concatenará la propiedad title a un texto.
methods: {
showMessage: function() {
console.log(‘Showing message: ‘+this.title + ‘ Aprendamos!’);
return this.title + ‘ Aprendamos!’;
}
}
Posteriormente declaramos dentro de una etiqueta h1 el método para renderizar el resultado de la función [1].
<h1>{{ showMessage() }}</h1>
Para volver a renderizar el resultado de la función accionamos el botón, si nos fijamos se calcula cada vez que salta el evento asociado al botón [2].
Hasta ahora hemos estado jugando con la instancia de Vue, su ciclo de vida, el renderizado y el doble enlazado de propiedades, los métodos, etc., pero no nos hemos parado con los bloques básicos que tiene.
Una instancia se compone de:
• $el: es el objeto componente HTML al que estará asociado mediante el id correspondiente
• $data: es el objeto que contiene las propiedades de la instancia
• $refs: es el objeto donde se registran los elementos marcados con el atributo ref.
Para ilustrarlo en este ejercicio hemos creado una instancia de Vue con cada uno de los bloques mencionados a la que hemos añadido unas sentencias que imprimen por consola cada uno de estos elementos para que podamos ver su contenido cuando se carga la página.
El contenido de $el es efectivamente el objeto que contiene la definición del HTML de nuestra instancia. Si inspeccionamos el objeto accediendo a la propiedad innerHTML nos devuelve en formato texto el contenido en lenguaje HTML [1].
El contenido de $data nos devuelve el objecto con las variables como la de nuestro ejercicio la denominada message.
Podemos también invocar los métodos de nuestra instancia tal y como vemos en el ejercicio y nos ejecutará la función.