– Persistencia estados al refrescar
Vuex – Persistencia en Cookies
Axios – Comunicación con Servidor
Axios – Interceptor de solicitudes
Axios – Interceptor Respuestas
Comunicación – Hijo – Padre por Callback
Comunicación – Mensajería Global
Formularios – Email con validación
Formularios – Opciones Checkbox
Formularios – Opción única Radiobutton
Formularios – Campo Personalizado
Formularios – Validación Vuelidate
Formularios – Validación personalizada
Pruebas Unitarias – Aislar componentes
Pruebas Unitarias – Mock de Vuex
¡Hola, Vue!
LOS COMIENZOS
¡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.
Configurar el entorno
PRIMEROS
