Vue.js 2 - Aprende desde cero el Framework JavaScript de moda (muestra gratuita) by alexbayosaiz

Vue.js 2 - Aprende desde cero el Framework JavaScript de moda ALEJANDRO BAYO SAIZ

CON EJEMPLOS

Accesible

Versátil

Eficiente

¿Ya sabes HTML5, CSS3 y JavaScript? Pues lee esta guía y comienza a construir tus proyectos en poco tiempo.

Simple, minimalista y elegante. Con Vue.js podrás construir aplicaciones web de cualquier escala.

Con pocos esfuerzos, tendrás un Workflow con un DOM virtual optimizado que te ayudará a corrigir los errores.

ES TR

RA TU

IT A

NIVEL BÁSICO

Soy Alejandro Bayo Saiz, desarrollador web frontend. Después de graduarme en Periodismo tuve la fortuna de toparme con el mundo del Desarrollo Web, donde descubrí herramientas y prácticas que me empezaron a apasionar. Todo este mundillo es lo que actualmente ocupa mi tiempo y dedicación. Hace un tiempo descubrí Vue.js y desde entonces he ido experimentando un continuo aprendizaje. Se me ocurrió una idea, ¿por qué no compartir mi proceso de aprendizaje con otras personas que estén empezando? Decidí hacer lo siguiente: a medida que estudio y exploro más a fondo Vue.js voy a recopilar todo en una serie de apuntes que maquetaré por capítulos, creando una serie de manuales didácticos en castellano. Es un proyecto que pretende crecer poco a poco conforme vaya explorando más y más este profundo Framework de JavaScript. Como documentación, he utilizado en primer lugar la guía oficial de Vue https://vuejs.org/, a la que pronto se unieron cursos y tutoriales de grandes profesionales. En primer lugar, el libro oficial The Majesty of Vue.js 2 escrito por Alex Kyriakidis, Kostas Maniatis, y el propio Evan You (creador de Vue.js). El curso Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) de Maximilian Schwarzmüller en Udemy, es uno de los pilares de mi aprendizaje y lo recomiendo encarecidamente. Además, tengo que mencionar a Juan Andrés Núñez quien también creó el curso Aprende Vue2 y Firebase paso a paso gratuito al que he recurrido en varias ocasiones. A todos estos profesionales, gracias por ser mis instructores. Este manual contiene ejemplos basados en la documentación utilizada. Todo el proyecto se encuentra alojado en GitHub para poder ver el código. Se trata de un primer libro con el Nivel Básico de lo que pretende ser una serie que avance en torno a niveles. Estoy abierto a sugerencias a la hora de crear el nuevo contenido, ideas y críticas de todo tipo que me ayuden a poder elaborar los siguientes manuales de la mejor forma posible para todes. Esto es una muestra gratuita.

Aprende Vue2.js desde cero

ÍNDICE Nivel Básico

0 - ¿Qué es Vue.js?----------------------------------------------------------------------------------------------------------- 8 Introducción----------------------------------------------------------------------------------------------------------------- 9 0.1 - El framework JavaScript progresivo-------------------------------------------------------------------------------- 9 0.2 - De JavaScript nativo a Vue.js---------------------------------------------------------------------------------------- 10 1 - Instalación---------------------------------------------------------------------------------------------------------------- 12 1.1 - Compatibilidad-------------------------------------------------------------------------------------------------------- 13 1.2 - Vue Devtools---------------------------------------------------------------------------------------------------------- 13 1.3 - Descargamos Vue y lo incluimos con la etiqueta <script>------------------------------------------------------- 14 1.4 - CDN-------------------------------------------------------------------------------------------------------------------- 14 1.5 - NPM------------------------------------------------------------------------------------------------------------------- 15 1.6 - Bower------------------------------------------------------------------------------------------------------------------ 15 1.7 - Vue-CLI---------------------------------------------------------------------------------------------------------------- 15 1.7 - La Instancia Vue------------------------------------------------------------------------------------------------------ 16 1.8 - Lenguaje de plantilla y sintaxis propios de Vue-------------------------------------------------------------------- 27 2 - Empezando---------------------------------------------------------------------------------------------------------------- 34 2.1 - ¡Hola movida!--------------------------------------------------------------------------------------------------------- 35 2.2 - La etiqueta <pre></pre>--------------------------------------------------------------------------------------------- 36 2.3 - Data binding. Unión bidireccional de datos en la vista----------------------------------------------------------- 37 2.4 - Deberes---------------------------------------------------------------------------------------------------------------- 38 3 - Renderizado condicional------------------------------------------------------------------------------------------------ 40 3.1 - ¿Qué es una directiva?----------------------------------------------------------------------------------------------- 41 3.2 - Renderizado condicional--------------------------------------------------------------------------------------------- 41 3.3 - Deberes---------------------------------------------------------------------------------------------------------------- 49 4 - Renderizado de listas---------------------------------------------------------------------------------------------------- 50 4.1 - Instalación de Bootstrap---------------------------------------------------------------------------------------------- 51 4.2 - v-for--------------------------------------------------------------------------------------------------------------------- 53 4.3 - v-for con un objeto (value, key, index)------------------------------------------------------------------------------ 55 4.4 - v-for con números----------------------------------------------------------------------------------------------------- 56 4.4 - v-for en un <template>----------------------------------------------------------------------------------------------- 57 4.6 - Deberes---------------------------------------------------------------------------------------------------------------- 58 5 - Manejo de eventos------------------------------------------------------------------------------------------------------- 60 5.1 - Eventos en línea------------------------------------------------------------------------------------------------------- 61 5.2 - Eventos usando métodos (el objeto methods)--------------------------------------------------------------------- 62 5.3 - Métodos en línea------------------------------------------------------------------------------------------------------ 63 5.4 - Parámetro $event para acceder al evento original del dom------------------------------------------------------ 64 5.5 - Modificadores de eventos-------------------------------------------------------------------------------------------- 64 5.6 - Modificadores del teclado-------------------------------------------------------------------------------------------- 68

Alejandro Bayo Saiz

6 - Propiedades Computadas----------------------------------------------------------------------------------------------- 70 6.1 - Ejemplo básico--------------------------------------------------------------------------------------------------------- 71 6.2 - Computed vs methods (cacheo de datos)--------------------------------------------------------------------------- 72 6.3 - Watchers--------------------------------------------------------------------------------------------------------------- 73 6.4 - Computed vs watchers----------------------------------------------------------------------------------------------- 76 6.5 - Ejemplo aplicado------------------------------------------------------------------------------------------------------ 77 6.6 - Deberes---------------------------------------------------------------------------------------------------------------- 78 7 - Filtros---------------------------------------------------------------------------------------------------------------------- 80 7.1 - Filtros locales---------------------------------------------------------------------------------------------------------- 81 7.2 - Filtros globales--------------------------------------------------------------------------------------------------------- 82 7.3 - Filtros con parámetros------------------------------------------------------------------------------------------------ 83 7.4 - Filtros en propiedades computadas--------------------------------------------------------------------------------- 84 7.5 - Filtros en métodos---------------------------------------------------------------------------------------------------- 85 7.6 - Ordenar resultados con propiedades computadas---------------------------------------------------------------- 86 7.7 - Librerías externas (Lodash)------------------------------------------------------------------------------------------- 87 7.8 - Las ventajas de usar libreRías externas en línea (lodash)---------------------------------------------------------- 88 7.9 - Deberes---------------------------------------------------------------------------------------------------------------- 90 8 - Clases y estilos----------------------------------------------------------------------------------------------------------- 92 8.1 - Clases en HTML <v-bind:class>------------------------------------------------------------------------------------- 93 8.2 - Estilos en línea <v-bind:style>--------------------------------------------------------------------------------------- 98 8.3 - Ejercicio de ejemplo de unión de clases y estilos------------------------------------------------------------------ 101 8.4 - Deberes---------------------------------------------------------------------------------------------------------------- 103 9 - Unión de datos en formularios----------------------------------------------------------------------------------------- 104 9.1 - Uso básico------------------------------------------------------------------------------------------------------------- 105 9.2 - Unión de valores------------------------------------------------------------------------------------------------------ 109 9.3 - Modificadores--------------------------------------------------------------------------------------------------------- 110 10 - Primer reto-------------------------------------------------------------------------------------------------------------- 112 ¡A pelear!--------------------------------------------------------------------------------------------------------------------- 113

Nivel Bรกsico

Aprende Vue2.js desde cero

0 ¿Qué es Vue.js? Definiciones

Alejandro Bayo Saiz

INTRODUCCIÓN El mundo de la web está en continuo cambio y pone a nuestra disposición centenares de herramientas para introducirnos en sus dominios. Actualmente, el paradigma que guía a las grandes aplicaciones web gira alrededor de una estructura en la que Frontend y Backend han estrechado sus vínculos gracias a un único lenguaje de base. El código JavaScript ha tomado más poder y cada vez en más ocasiones es el que se encarga de las dos partes de la aplicación, utilizando un framework o librería JavaScript para el Frontend y un modelo de datos Backend guiado en su mayor parte por Node.js. Durante aproximadamente los últimos 6 años han aparecido en escena varios frameworks y librerías de JavaScript que ayudan a crear aplicaciones web Frontend facilitando su escritura y ofreciendo una serie de funcionalidades extra en pocas líneas de código. Las más conocidas son Angular.js, React.js. y ahora Vue.js. El creador de Vue.js es Evan You. Después de trabajar en Google y desarrollar varios proyectos con Angular.js, se hizo una pregunta: "¿Y si pudiera extraer la parte que realmente me gusta de Angular y construir algo realmente ligero sin todos los conceptos extra involucrados?". En febrero de 2014 lanzó Vue.js. En cuatro años este framework se ha popularizado por resultar fácil de aprender, escribir, entender, y mantener. Como principal característica posee un sistema basado en componentes que permite la reutilización casi completa de nuestro código si lo escribimos y organizamos correctamente. Además, incluye soporte para Browserify (Vueify) y para Webpack (Vue-CLI) que nos permite fácilmente configurar nuestro flujo de trabajo en base a las técnicas y convenciones del JavaScript moderno. Interesante, ¿no?. Pues empecemos :)

0.1 - EL FRAMEWORK JAVASCRIPT PROGRESIVO Vue.js es un framework, o más bien una librería de JavaScript que sirve para crear contenido en el lado del cliente, o sea, la parte del Desarrollo Web Frontend. Todo lo que creamos con Vue.js es en el lado del cliente, aunque más adelante veremos cómo añadirle la parte de Backend a nuestras aplicaciones. Seguramente, lo primero que encuentres cuando entres en la web oficial de Vue.js sea: "The Progressive JavaScript Framework" ¿Qué quiere decir esto exactamente? Resumiendo, Vue.js está diseñado para construir interfaces web interactivas. Añade enlace de datos multidireccional, interactividad y reactividad a tus aplicaciones web. Se especializa en la capa de vista (vm - ViewModel) y se encarga de mantener en sincronía los datos del modelo y la vista. Esto se asemeja al Modelo Vista Controlador, cada vez más en auge y ligado a las nuevas prácticas dentro del actual paradigma del Desarrollo Web. En estas nuevas prácticas, normalmente tenemos una aplicación web con una serie de datos que a través de funciones y controladores cambian, de manera que se actualizan también en la vista. El resultado es una aplicación web que cambia en tiempo real su modelo de datos a través de la vista. • A nivel externo, mejora la experiencia de usuario porque permite crear interfaces más interactivas y rápidas. • A nivel interno, permite escribir un código mantenible, escalable y reutilizable. La filosofía de Vue.js es facilitar la creación de aplicaciones web interactivas y reactivas en una misma página. Lo que creamos con este framework es una single page application (SPA), la cual carga el contenido de un solo archivo JavaScript y mejora la experiencia de usuario. Se eliminan las cargas de página y se añaden interactividad y reactividad a la vista mediante el modelo. Además, podemos escalar dicha aplicación fácilmente ya que tendremos un código mantenible y reutilizable con una apariencia elegante y una construcción liviana. Ahora que hemos leído un poco de teoría, pasemos a la acción.

Aprende Vue2.js desde cero

0.2 - DE JAVASCRIPT NATIVO A VUE.JS Con JavaScript nativo se puede realizar todo lo anteriormente descrito. es posible escribir un código reactivo que actualice la vista con los datos que vayan cambiando en el modelo. Sin embargo, es más complicado y sobre todo más sucio que con un framework como Vue. Vamos a ver un ejemplo simple de reactividad con código nativo de JavaScript y su equivalente con Vue.js para hacer una primera aproximación de lo que veremos a lo largo de este libro. El ejemplo será un input que cuando escribamos texto dentro actualice lo que veamos en un encabezado h1. HTML <html> <head> <title>De JavaScript nativo a Vue.js</title> </head> <body> <main> <h1>...</h1> <input type="text"> </main> <script src="js/main.js"></script> </body> </html>

JS const input = document.querySelector('input'); const h1 = document.querySelector('h1'); input.addEventListener('keyup', function(){ h1.innerHTML = input.value; }); main.js

Declaramos dos constantes, una llamada input, con el selector del propio input en el documento, y otra llamada h1 con el selector del h1 de nuestro documento. Ahora que ya tenemos buscados los dos elementos, tenemos que añadir un evento que haga cambios cuando se altere el input. Es addEventListener, al que le pasamos el método keyup y la función en la que igualamos el contenido HTML de nuestro h1 con el valor que tenga el input. El problema viene cuando queremos añadir más elementos que escuchen esos cambios. Tendríamos que añadir todos esos elementos a nuestro código JavaScript, haciéndolo más confuso, difícil de actualizar y difícil de mantener. Por lo tanto, tiene que haber una forma más sencilla para hacer todo eso. Vue.js nos ofrece esa forma. Veamos el mismo ejemplo con Vue:

HTML <html> <head> <title>De JavaScript nativo a Vue.js</title> </head> <body> <div id="app"> <h1>{{ mensaje }}</h1> <input type="text" v-model="mensaje"> </div> <script src="https://unpkg.com/vue"></script> <script src="js/main.js"></script> </body> </html>

Alejandro Bayo Saiz

JS new Vue({ el: '#app', data: { mensaje: '¡Hola mundo!', } });

main.js

El resultado de este código es lo mismo que el anterior. A través de su sintaxis, Vue nos permite mostrar en el encabezado h1 el mensaje original guardado en nuestro modelo de datos, que a su vez tenemos enlazado al valor del input en el HTML mediante la directiva v-model. En el momento de cargar la página, en el h1 aparecerá escrito ¡Hola mundo!, pero cuando cambiemos el texto del input, los datos del modelo también cambiarán, y mediante las directivas de Vue se actualizará también la vista. Mola ¿eh? No te preocupes si no lo has entendido todo, a lo largo de este libro iremos estudiando desde el principio Vue.js.

Aprende Vue2.js desde cero

1 Instalaciรณn Primeros pasos

Alejandro Bayo Saiz

1.1 - COMPATIBILIDAD Vue no soporta Internet Explorer 8 e inferior porque usa las características de ECMAScript 5. Sin embargo, sí que soporta todos los compiladores de ECMAScript 5 en el resto de navegadores. Podemos ver los navegadores que soportan ES5 entrando en Can I Use.

1.2 - VUE DEVTOOLS Cuando estamos desarrollando con Vue, utilizaremos la herramienta para desarrolladores del framework. Tan solo tenemos que instalar Vue Devtools en nuestro navegador. Yo lo tengo como extensión de Chrome, quizás lo más cómodo y acertado. Esta herramienta nos brinda una interfaz sencilla en el panel de desarrolladores para inspeccionar las aplicaciones que estemos creando con Vue.js. Es muy útil ya que está construida específicamente para Vue y por lo tanto posee todo lo necesario para encontrar los errores y depurar nuestro código. Vue Devtools cuenta con una inspección de todos los elementos de nuestra aplicación, introduciéndolos en variables temporales que el propio crea para facilitarnos el proceso. Además cuenta incluso con un buscador de componentes para que encontremos más rápidamente todo lo que buscamos. Ya iremos conociendo mejor esta herramienta a medida que utilicemos Vue.

* Cuando se detecte la presencia de Vue.js, el icono de la extensión nos avisará de que podemos abrir Vue Devtools.

* La herramienta Vue Devtools estará disponible en las opciones de desarrollo y será similar a esto.

Aprende Vue2.js desde cero

A continuación vamos a ver las diferentes posibilidades que tenemos para instalar Vue.js en nuestro proyecto. Durante el manual haremos uso de todas según recomienda la guía oficial, empezando de lo más básico hasta llegar a lo más avanzado.

1.3 - DESCARGAMOS VUE Y LO INCLUIMOS CON LA ETIQUETA <script> Simplemente descargamos el archivo vue.js desde la página oficial de Vue y lo incluimos en nuestro proyecto. Lo guardamos en la carpeta que deseemos y lo introducimos entre las etiquetas <script></script> en nuestro documento html. Vue se registrará como una variable global a todo nuestro proyecto. En la web disponemos de dos versiones del framework, la versión de desarrollo, la cual incluye todos los avisos de errores en el modo desarrollo, y la versión de producción, la minificada. Ésta última pesa menos pero no te muestra los errores en la consola. Por lo tanto, Vue recomienda no utilzar la versión minificada dutante el desarrollo porque podemos no ver los errores comunes. HTML // Con la ruta correspondiente en nuestra estructura de carpetas <script src="./vue.js"></script>

No utilices la versión minificada durante el desarrollo. Puedes perder unos buenos avisos de errores comunes que Vue incluye en la versión sin minificar. ¡Estos avisos pueden serte muy útiles!

1.4 - CDN También existe la opción de cargar Vue.js desde el CDN. La documentación oficial recomienda esta opción como la más asequible para usuarios nuevos. Reflejará la última versión tan pronto como esté disponible. El paquete de NPM está disponible en cdn.jsdelivr.net/npm/vue. También está disponible en unpkg y cdnjs: unpkg: https://unpkg.com/vue@2.5.6/dist/vue.js cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js La opción cdnjs puede tardar algo de tiempo al sincronizar con las últimas versiones, e incluso no estar disponible. Así pues, en este manual haremos uso del CDN unpkg con el siguiente script: HTML // Si eliminamos el número de versión, siempre se cargará automáticamente la última disponible. <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

En la primera parte de este manual haremos uso de Vue.js tal y como recomienda la guía oficial, desde las etiquetas <script></script> en nuestro html que incluirán el CDN más estable en las últimas versiones. De momento no profundizaremos en un entorno de desarrollo avanzado. Las siguientes formas de instalación las veremos en el Nivel intermedio.

Alejandro Bayo Saiz

1.5 - NPM NPM es la instalación recomendada cuando vamos a construir una aplicación a gran escala con Vue. Combina a la perfección con los principales gestores de módulos y tareas como Webpack o Browserify. TERMINAL # La última versión estable $ npm install vue

1.6 - BOWER También podemos realizar la instalación desde Bower. TERMINAL # La última versión estable $ bower install vue

1.7 - VUE-CLI Vue viene provisto con un CLI oficial para una rápida configuración de aplicaciones de una sola página a gran escala. Incluye herramientas y configuraciones bastante avanzadas para crear un entorno de desarrollo avanzado para el frontend. Solo lleva unos pocos minutos y prepara un workflow con carga y refresco de vista en tiempo real, detección y aviso de errores al guardar y herramienta de producción lista para construir la aplicación final. En este libro utilizaremos Webpack, pero eres libre de utilizar Browserify si lo prefieres. Para configurar Webpack y crear el entorno de desarrollo frontend que buscamos con el propósito de trabajar en aplicaciones escalables utilizaremos vue-cli, un comando sencillo que introduciremos en el terminal. Además, existen diferentes plantillas predefinidas para iniciar la aplicación, pero también puedes hacerlo por tu cuenta, como haremos en este manual.

TERMINAL # $ # $ # $ $ $

Instalación global de vue-cli npm install --global vue-cli Creación de un nuevo proyecto utilizando la plantilla "webpack" vue init webpack nombre-del-proyecto Instalación de las dependencias cd nombre-del-proyecto npm install npm run dev

Como hemos mencionado anteriormente, esto son unas pinceladas de cómo crear un proyecto más avanzado. De momento no haremos uso de ello hasta que sentemos las bases de Vue.js y estemos preparados para incluir herramientas más complejas.

Vue CLI presupone unos conocimientos previos de Node.js y las herramientas de compilación relacionadas (como Webpack). Si es tu primer contacto con Vue y nunca has manejado herramientas de compilación de frontend, te sugiero que los primeros pasos los inicies desde el principio como haremos en esta guía.

Aprende Vue2.js desde cero

1.7 - LA INSTANCIA VUE

• Creando una Instancia Vue Cualquier aplicación Vue se inicia con la creación de una nueva Instancia Vue con la función constructora de Vue:

JS var vm = new Vue({ // options });

Aunque no está estrictamente ligado al patrón Modelo Vista Controlador (MVC), Vue nace inspirado en su mayor parte por esta reciente corriente. Como convención dentro del framework, siempre utilizaremos la variable vm (abrebiatura de ViewModel) para referirnos a la Instancia Vue. Cuando creamos una Instancia Vue le pasamos un objeto con opciones. En este manual vamos a estudiar esas diferentes opciones y cómo puedes manejarlas para conseguir el resultado que quieres en tu aplicación. Además también puedes apoyarte en las referencias de la API oficial, donde se muestra una documentación con todas las opciones posibles. Una aplicación Vue consiste en una Instancia Vue raíz creda con new Vue(), opcionalmente organizada en un árbol de carpetas anidadas, y que utiliza componentes reutilizables. Por ejemplo, un árbol de carpetas para una aplicación de tareas que hacer podría resultar así: ESTRUCTURA DE CARPETAS Instancia Raíz |- ListaTareas |- Tarea |- BotonBorrarTarea |- BotonEditarTarea |- FooterLista |- BotonBorrarTodas |- EstadisticasTareas

Más adelante veremos con profundidad el sistema de componentes de Vue, la parte más potente del framework. Pero por ahora nos basta con saber que cada componente es una Instancia Vue, por lo que aceptan los mismos objetos de opciones.

• Métodos y datos Cuando creamos una Instancia Vue, ésta añade todas las propiedades encontradas en su objeto data al Sistema de Reactividad de Vue. Por lo tanto, cuando los valores de estas propiedades cambien, la vista va a reaccionar modificándolos para que coincidan con los nuevos valores definidos. Así pues, las variables vm de la Instancia Vue serán equivalentes a las propiedades de nuestro objeto data y viceversa.

Alejandro Bayo Saiz

JS // Nuestro objeto data var data = { a: 1 } // Añadimos el objeto a la Instancia Vue var vm = new Vue({ data: data }); // La variable vm y data hacen referencia al mismo objeto vm.a === data.a // => true // Modificar la propiedad en la Instancia Vue afecta también al dato original del objeto data vm.a = 2 data.a // => 2 // ... y viceversa data.a = 3 vm.a // => 3

Como hemos dicho, en el momento en el que los datos cambien, la vista volverá a reproducirse con los nuevos. Pero hay que tener en cuenta que las propiedades de los datos solo son reactivas si existían cuando se creó la instancia. Esto significa que si agregamos una nueva propiedad, como por ejemplo:

JS vm.b = 'hola'

Los cambios que realicemos sobre la propiedad b no se mostrarán en la vista, porque sencillamente, b no existe. Si vamos a hacer uso de una propiedad más adelante, tenemos que declararla en nuestro objeto data asignándole un valor inicial, normalmente un valor vacío o nulo. Por ejemplo:

JS data: { nuevaTarea: '', contadorVisitas: 0, EsconderTareasCompletadas: false, tareas: [ ], error: null }

Además de las propiedades dentro del objeto data, la Instancia Vue ofrece varias propiedades y métodos bastante útiles para usar dentro de ella. Estas propiedades y métodos van precedidos del prefijo $ para diferenciarlas de las propiedades que definimos en el objeto data. Veamos un ejemplo:

Aprende Vue2.js desde cero

JS var data = { a: 1 } var vm = new Vue({ el: '#app', data: data }); vm.$data === data // => true vm.$el === document.getElementById('app') // => true // $watch es un método de la Instancia Vue vm.$watch('a', function (nuevoValor, antiguoValor) { // Este callback será llamado cuando `vm.a` cambie });

Puedes consultar las referencias en la API, donde hay una lista con todas las propiedades y métodos de la Instancia Vue.

• ¿Podemos crear más de una Instancia Vue? La respuesta es sí. Podemos crear todas las instancias Vue que necesitemos. Cada una tendrá su estructura de datos propia y un elemento diferente donde renderizará. Así por ejemplo, podríamos crear dos instancias diferentes para organizar dos partes de nuestra aplicación que queremos que estén separadas. Pensando en una implementación real, podríamos tener un calendario totalmente ajeno al contenido que mostramos en nuestra aplicación. Esto supondría crear dos partes separadas y construir cada una con unos datos propios. De esta forma estaríamos separando en bloques nuestro código, creando algo parecido a un widget, ¿no?. Esto es una simple pincelada de la potencia de Vue.js, pues como veremos en este libro, está principalmente orientado al uso y reutilización de componentes con funcionamiento independiente y reutilizables. No te preocupes si algún elemento del siguiente código es completamente nuevo para ti porque lo veremos más tarde, lo importante es saber cómo funciona el framework con respecto al lenguaje JavaScript y el uso del DOM. HTML <body> <div id="app1"> <h1>{{ mensaje }}</h1> <button @click="cambiarMensaje()">Cambiar</button> </div> <div id="app2"> <h1>{{ mensaje }}</h1> <button @click="cambiarMensaje()">Cambiar</button> </div> </body>

Aquí tenemos dos contenedores con un id que nos sirve para diferenciarlos. Son exactamente iguales. El mensaje entre las dos llaves mostrará los datos guardados en la Instancia Vue y el botón ejecutará el código que haya dentro de la función cambiarMensaje(). Veamos ahora el código que crea las dos instancias.

Alejandro Bayo Saiz

JS new Vue({ el: '#app1', data: { mensaje: 'Instancia 1' }, methods: { cambiarMensaje() { this.mensaje = 'He sido cambiado' } } }); new Vue({ el: '#app2', data: { mensaje: 'Instancia 2' } });

Este código crea dos instancias diferentes. Cada una hace referencia a una parte específica del HTML designada por la propiedad el: , lo que las convierte en un modelos diferentes. El método cambiarMensaje() solo lo hemos definido en el objeto methods de la primera instancia, aunque por otro lado, el botón que ejecuta su código se encuentra presente en los dos elementos de nuestro HTML, <div id="app1"> y <div id="app2">. La palabra this hace referencia al objeto data de la instancia en la que se encuentra. Con todo esto, ¿Qué crees que sucederá?

Cada Instancia Vue tiene definidos sus propios datos y propiedades. Sencillamente el método cambiarMensaje() no existe en la segunda instancia. Sucede lo mismo con la palabra this, la cual hace referencia a la propiedad mensaje dentro del objeto data y aunque la encontramos en ambas instancias, this solo hace referencia al valor que se encuentra en la primera de ellas, en este caso un String ("He sido cambiado").

Aprende Vue2.js desde cero

• ¿Podemos acceder a una Instancia Vue desde otra? La respuesta también es sí. Si guardamos cada una de las instancias en variables diferentes, podemos acceder a ellas fácilmente a las propiedades de la otra: HTML <body> <div id="app1"> <h1>{{ mensaje }}</h1> </div> <div id="app2"> <h1>{{ mensaje }}</h1> <button @click="cambiarMensaje()">Cambiar</button> </div> </body>

JS var vm1 = new Vue({ el: '#app1', data: { mensaje: 'Instancia 1' } });

var vm2 = new Vue({ el: '#app2', data: { mensaje: 'Instancia 2' }, methods: { cambiarMensaje() { vm1.mensaje = 'He sido cambiado por la instancia 2' } } });

Desde la segunda instancia estamos accediendo a la primera porque podemos hacer referencia a la propiedad mensaje de la variable vm1 tal y como haríamos en JavaScript nativo. Pero no solo eso. Además, podemos hacer uso de esa variable fuera de las instancias, escribiendo nuestro código nativo. Por ejemplo escribiendo después del código anterior una función que modifique el valor de mensaje en vm1 transcurridos dos segundos. JS [ . . .] // Escribimos a continuación del código anterior setTimeout(function() { vm1.mensaje = 'He sido cambiado por setTimeout'; }, 2000);

Alejandro Bayo Saiz

Técnicamente vm1 es una Instancia Vue que contiene otras muchas propiedades que ni siquiera hemos creado nosotros, que se han creado con el constructor new Vue({}) del framework. La propiedad mensaje está dentro de un objeto data que a su vez está dentro de otro objeto que es lo que le estamos pasando a este constructor de Vue. Entonces, ¿por qué es posible que podamos acceder tan fácilmente a la variable vm1, como si la hubiéramos definido fuera de toda la complejidad de este constructor? La respuesta es que Vue hace un proxy automático de toda la información que contiene dentro de su constructor y la registra en el DOM, haciéndola más accesible para nosotros. Con este proxy, el constructor de Vue coge el objeto que le pasamos a la Instancia incluyendo sus propiedades y métodos, lo procesa todo y genera propiedades nativas en el propio objeto de su instancia. Sin embargo, igual que podemos acceder desde fuera a cualquier propiedad de la Instancia Vue, no está permitido añadirlas desde fuera. Lo que añadimos desde fuera no será una propiedad de la instancia. Solamente lo que pasemos en el objeto del constructor de Vue será lo que formará parte del objeto de la Instancia Vue tras ser procesado. Hagamos la prueba a ver qué nos dice la consola: JS [ . . .] // Sustituimos la función setTimeout anterior por lo siguiente: vm1.nuevaPropiedad = '¡Soy nueva!'; console.log(vm1);

Abrimos la consola en nuestro navegador y nos encontraremos lo siguiente:

Aprende Vue2.js desde cero

Efectivamente el proxi de Vue.js no le asigna ninguna propiedad en su instancia.

• ¿Cómo actualiza el DOM Vue.js? Como ya sabemos, Vue crea una gran cantidad de propiedades para su instancia. Todas ellas pueden tener cambios en algún momento y el DOM tiene que ser actualizado para mostrarlos. La actualización del DOM ha de hacerse cada vez que se registre un cambio, lo que hace que se convierta en un proceso bastante lento teniendo en cuenta todas las propiedades con las que cuenta una instancia. JavaScript es un lenguaje de programación muy rápido y cuando hay cambios son actualizados casi instantáneamente, pero no sucede lo mismo con el DOM, que incluye también el HTML. Nos encontramos pues con lo siguiente:

Instancia Vue

mensaje = 'Hola DOM' nombre edad

DOM Observa y actualiza (si es necesario) Observa y actualiza (si es necesario) Observa y actualiza (si es necesario)

Según el diagrama, si alguna de las propiedades cambiara en la Instancia Vue, se actualizarían todas y cambiarían el modelo, es el flujo habitual que sigue la actualización del DOM. Pero esto no es así. Vue crea un intermediario que hace que únicamente se actualicen aquellas propiedades que han experimentado cambios. Veamos:

Alejandro Bayo Saiz

Instancia Vue

mensaje = 'Hola DOM Virtual'

DOM Virtual Observa

<h1>Hola DOM Virtual</h1>

DOM Actualiza

<h1>Hola DOM Virtual</h1>

nombre

edad

Vue.js crea un DOM Virtual que sirve como intermediario entre la Instancia Vue y el DOM original. Es una copia idéntica del DOM pero en JavaScript, mucho más rápido. El DOM Virtual está comprobando continuamente si hay diferencias entre sus propios datos y la Instancia Vue. Si existen cambios, actualiza la propiedad que haya cambiado en la Instancia Vue y entonces es cuando se actualiza también el DOM original, pero solo con la propiedad que haya cambiado. De esta forma, el proceso de actualización no se ve mermado por la gran cantidad de propiedades de la Instancia Vue y se convierte en un motor rapidísimo de actualización de la vista mediante el modelo de datos (View Model). Potente, ¿eh?

• Puntos de enganche de la Instancia Vue ("Instance Lifecycle Hooks") Cada Instancia Vue sigue una serie de pasos de inicialización desde que es creada. Por ejemplo, necesita observar los datos configurados, compilar la plantilla, montar la instancia en el DOM y actualizar el DOM cuando los datos cambian. A lo largo de este camino, la Instancia Vue también realiza una serie de funciones a las que denominamos lifecycle hooks o en su traducción al castellano, ganchos de ciclo de vida. Estos puntos de enganche nos dan la oportunidad de añadir nuestro propio código en fases o etapas específicas de la Instancia. Por ejemplo, el gancho created se utiliza para ejecutar código después de que se haya creado la Instancia Vue: JS new Vue({ data: { a: 1 }, created: function () { // `this` hace referencia a la instancia vm console.log('a es: ' + this.a) } }); // => "a es: 1"

Hay otros ganchos en el ciclo de vida de la Instancia Vue que hacen referencia a diferentes fases, como por ejemplo mounted, updated, y destroyed. Todos tienen un nombre cuyo alias hace referencia al momento en el que la Instancia Vue las invoca. A continuación, vamos a hacer un pequeño ejemplo para que hagas pruebas y puedas ver las diferentes fases del ciclo de vida de la Instancia Vue en la consola del navegador. Es una buena forma para entender el concepto.

Aprende Vue2.js desde cero

HTML <body> <div id="app"> <h1>{{ titulo }}</h1> <button @click="titulo = 'He cambiado'">Cambio de estado</button> <button @click="destroy()">Destruir Instancia Vue</button> </div> </body>

JS new Vue({ el: '#app', data: { titulo: 'Fases de la Instancia Vue' }, beforeCreate: function() { console.log('beforeCreate()'); }, created: function () { console.log('create()'); }, beforeMount: function() { console.log('beforeMount()'); }, mounted: function() { console.log('mounted()'); }, beforeUpdate: function() { console.log('beforeUpdate()'); }, updated: function() { console.log('updated'); }, beforeDestroy: function() { console.log('beforeDestroy()'); }, destroyed: function() { console.log('destroyed()'); }, methods: { destroy(){ this.$destroy(); } } });

De nuevo, no te preocupes si no entiendes todo. De momento solo hemos escrito las todas las funciones que hacen referencia a las distintas fases del ciclo de vida de la Instancia Vue. Hemos añadido un botón que realiza una actualización en el DOM cambiando la propiedad titulo en el objeto data y por último hemos creado destroy(), un método en el objeto methods que destruye toda la instancia y se ejecuta al pulsar otro botón. Ese es el concepto. Ahora veamos qué nos muestra la consola:

Alejandro Bayo Saiz

Nada más que cargamos la página, como es lógico, se ejecutan beforeCreate(), create(), beforeMount() y mounted(). En el momento en el que pulsamos el botón "Cambio de estado" se relizan cambios en el DOM y se ejecutan las fases beforeUpdate() y updated(). Por último, si pulsamos el botón que ejecuta el método destroy(), tienen lugar las fases beforeDestroy() y destroyed(). Si pulsamos este botón en primer lugar cuando la página carga por primera vez, se ejecutarán solo las fases beforeDestroy() y destroyed(), lo que hará que toda la Instancia Vue se destruya y el botón "Cambio de estado" no funcione porque simplemente no existe la Instancia.

No utilices arrow functions (funciones flecha) en una propiedad o método de la instancia como por ejemplo created: () => console.log(this.a) o vm.$watch('a', nuevoValor => this. miMetodo()). Puesto que las arrow functions están vinculadas al contexto padre de nuestro código, this no se va a reconocer y va a dar errores en la Instancia Vue como: Uncaught TypeError: Cannot read property of undefined o Uncaught TypeError: this.miMetodo is not a function.

Aprende Vue2.js desde cero

• Diagrama del ciclo de vida No necesitas entender por completo todo el proceso que muestra el diagrama. A medida que avancemos y aprendamos más cosas sobre Vue.js, este diagrama es una referencia que puede resultarnos de gran ayuda. Está directamente extraído de la web oficial, donde también puedes echarle un ojo cuando quieras.

Puedes descargar el código de la sección en GitHub: 1.7 - La Instancia Vue

Alejandro Bayo Saiz

1.8 - LENGUAJE DE PLANTILLA Y SINTAXIS PROPIOS DE VUE Vue.js utiliza una sintaxis basada en plantillas HTML que te permite unir de forma declarativa el renderizado de vista del DOM con los datos de la Instancia Vue. Todas las plantillas de Vue.js son válidas para todos los navegadores, compiladores y analizadores de código HTML. Por detrás de lo que vemos, Vue compila las plantillas para obtener un DOM virtual con funciones renderizadas. Combinado con la reactividad del sistema, Vue es capaz de determinar de manera inteligente el número mínimo de componentes que va a renderizar y de esta forma aplicar el menor número de manipulaciones al DOM cuando los datos de nuestra aplicación cambien, haciéndola más eficiente. Si estás familiarizado con los conceptos del DOM virtual y prefieres sacar el partido de JavaScript nativo, puedes escribir directamente las funciones de renderizado en vez de utilizar plantillas, con el soporte opcional JSX.

• Interpolaciones ## Texto La forma más básica de enlazar datos es la interpolación de texto usando la sintaxis "Mustache" (llaves dobles): HTML <span>Texto: {{ mensaje }}</span>

Las etiquetas con las dobles llaves se reemplazan con el valor correspondiente a la propiedad mensaje en el objeto data. La vista se actualizará en el momento en el que la propiedad mensaje cambie en la Instancia Vue y se mostrará en tiempo real el nuevo valor que adopte. Además, también se puede realizar una única interpolación que no varíe cuando los datos cambien. Esto es posible gracias a la directiva v-once pero ten en cuenta que esto afectará a la unión de todos los datos en ese mismo nodo. HTML <span v-once>Esto nunca cambiará: {{ mensaje }}</span>

## HTML puro Las dobles llaves interpretan los datos como texto plano, no como HTML. Para incrustar código HTML real hay que utilizar la directiva v-html. Por ejemplo, tenemos en nuestro objeto data lo siguiente: JS data: { htmlPuro: '<h1 style="color:red">¡Hola Vue.js!</h1>' }

En nuestro HTML tendríamos que escribir htmlPuro dentro de la directiva v-html resultando así:

Aprende Vue2.js desde cero

HTML // Esto no va a funcionar como esperamos, mostrará una cadena de texto <p>{{ htmlPuro }}</p> // El uso correcto es este <p v-html="htmlPuro"></p>

Puedes ver el mismo ejemplo funcionando en este archivo que he preparado en JSFiddle. Hay que tener en cuenta que no podemos utilizar v-html para componer plantillas por partes, pues Vue no es un motor de composición de plantillas a partir de cadebas de textos . En su lugar, se utilizan los componentes como motor esencial para crear, reutilizar y componer las Interfaces de Usuario de nuestra aplicación.

El uso arbitrario de renderizados HTML en nuestra aplicación web puede ser muy peligroso porque puede conducir fácilmente a vulnerabilidades XSS. Solo debemos utilizar la interpolación v-html en el contenido que realmente resulte de confianza y jamás debemos usarla en el contenido proporcionado por el usuario.

## Atributos Las dobles llaves no se utilizan dentro de los atributos HTML. En su lugar utilizamos la directiva v-bind:

HTML <div v-bind:id="idDinamico"></div>

Alejandro Bayo Saiz

## Atributos booleanos En el caso de los atributos booleanos, en los que su mera existencia implica que tienen el valor true por defecto, la directiva v-bind funciona de una forma un tanto diferente, veamos este ejemplo: HTML <button v-bind:disabled="BotonDesactivado">Botón</button>

Si BotonDesactivado tiene el valor null, undefined o false, el atributo disabled no se incluirá en el renderizado HTML y el botón aparecerá desactivado. Puedes ver el mismo ejemplo funcionando en este archivo que he preparado en JSFiddle.

## Usando expresiones JavaScript Hasta ahora solo hemos visto cómo incluir unión de datos con propiedades clave en nuestras plantillas. Pero Vue.js soporta todo el poder de JavaScript puro dentro de toda su sintaxis de unión de datos. HTML {{ numero + 1 }} {{ ok ? 'SÍ' : 'NO' }} {{ mensaje.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

Estas expresiones serán evaluadas como JavaScript en el conjunto de datos de la Instancia Vue. Pero una restricción importante a tener en cuenta es que cada unión de datos solo puede contener una expresión simple JavaScript, así pues, los siguientes ejemplos no funcionarán:

Aprende Vue2.js desde cero

HTML  {{ var a = 1 }}  {{ if (ok) { return 'SÍ' } else { return 'NO' } }} --> Así no. {{ ok ? 'SÍ' : 'NO' }} --> Así sí.

Las expresiones en plantilla están limitadas y solo tienen acceso a una pequeña lista de elementos globales como son Math o Date. No hay que intentar acceder a variables globales de usuario en estas expresiones.

• Directivas Las directivas son atributos especiales con el prefijo v-. Los valores de los atributos de una directiva son expresiones JavaScript simples (excepto v-for, lo que veremos más adelante). La labor de una directiva es reaccionar y aplicar reactivamente los cambios al DOM cuando los valores de su expresión sufran modificaciones. Veamos un ejemplo: HTML <p v-if="visible">Ahora me ves</p>

Aquí, la directiva v-if va a quitar/insertar el elemento <p> basándose en el booleano que contenga la expresión visible. JS new Vue({ el: '#app', data: { visible: true } });

Puedes ver el mismo ejemplo funcionando en este archivo que he preparado en JSFiddle. 30

Alejandro Bayo Saiz

## Argumentos Algunas directivas pueden tomar un "argumento", el cual irá especificado después de los dos puntos que sigan a la directiva. Por ejemplo, usamos de esta forma la directiva v-bind para actualizar reactivamente un atributo HTML: HTML <a v-bind:href="url"> ... </a>

En este ejemplo, href es el argumento que le dice a la directiva v-bind que vincule el atributo href del elemento con el valor de la expresión url. Podemos ver otro ejemplo con la directiva v-on, la cual escucha los eventos del DOM. HTML <a v-on:click="haceAlgo"> ... </a>

En este caso, el argumento es el nombre del evento que escucha la directiva. Más adelante veremos más profundamente cómo funcionan los manejos de eventos en Vue.js. ## Modificadores Los modificadores son sufijos añadidos tras un punto que nos indican cómo ha de comportarse una directiva en casos especiales. Por ejemplo, el modificador .prevent le dice a la directiva v-on que invoque event.preventDefault() en el evento desencadenado. HTML <form v-on:submit.prevent="enviar"> ... </form>

Funcionaría exactamente igual que si lo escribiéramos directamente en nuestro código JavaScript. Más sencillo, ¿no? HTML methods: { enviar: function() { event.preventDefault(); alert('Funciona'); } }

Cuando lleguemos al capítulo de los modificadores de eventos trataremos otros ejemplos para v-on y para v-model. Por ahora, la misión de este capítulo es realizar una primera toma de contacto con los elementos de sintaxis que utilizaremos más adelante para que nada más verlos los identifiquemos mejor.

Aprende Vue2.js desde cero

• Abreviaturas La v- como prefijo sirve para identificar a simple vista los atributos especiales de Vue en tus plantillas. Esto es muy útil cuando estamos utilizando Vue.js para aplicar comportamientos dinámicos a los elementos de nuestro HTML. Sin embargo, puede resultar repetitivo y redundante si lo usamos frecuentemente en muchas de nuestras directivas. Al mismo tiempo , la necesidad del prefijo v- se vuelve menos importante a medida que construimos nuestra aplicación puesto que sabemos de sobra que estamos trabajando con Vue. Por ello, Vue.js nos brinda unas abreviaturas especiales para las directivas que más se utilizan, v-bind y v-on, que nos harán más cómodo el trabajo. Veamos cuáles son y su sencilla sintaxis: ## v-bind Algunas directivas pueden tomar un "argumento", el cual irá especificado después de los dos puntos que sigan a la directiva. Por ejemplo, usamos de esta forma la directiva v-bind para actualizar reactivamente un atributo HTML: HTML  <a v-bind:href="url"> ... </a>  <a :href="url"> ... </a>

Sustituimos v-bind: por únicamente los dos puntos : ## v-on HTML  <a v-on:click="hacerAlgo"> ... </a>  <a @click="hacerAlgo"> ... </a>

Sustituimos v-on: por únicamente el símbolo de arroba @ Quizá esta sintaxis pueda parecer un poco diferente al HTML que conocemos, pero : y @ son caracteres válidos para los nombres de atributos y todos los navegadores compatibles con Vue.js pueden analizarlo correctamente. Además, tenemos que saber que las directivas no aparecen en el renderizado final de nuestro HTML por lo que son totalmente invisibles en la consola de desarrollo. Las abreviaturas son opcionales y voluntarias, pero acabarás apreciando su uso a medida que vayas aprendiendo más sobre Vue.js.

Alejandro Bayo Saiz

Aprende Vue2.js desde cero

2 Empezando ยกHola movida!

Alejandro Bayo Saiz

2.1 - ¡HOLA MOVIDA!

La guía oficial de Vue.js asume un nivel intermedio de conocimentos de HTML, CSS y JavaScript. Si este es tu primer contacto con el desarrollo frontend podría no ser la mejor idea comenzar con un framework. Como consejo, comienza por la base y adquiere conocimientos eseciales antes de iniciarte en una librería de un lenguaje tan amplio como es JavaScript. Si tienes experiencia previa con otros frameworks puede ayudarte a desenvolverte mejor, pero no es algo requerido.

La forma más fácil de comenzar con Vue.js es usando el ejemplo que he preparado en JSFiddle. Siéntete libre de cambiar los elementos. También puedes crear un archivo index.html e incluir Vue, que es lo que haremos a continuación.

HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>!Hola movida!</title> </head> <body> <div id="app"> <h1>{{ mensaje }}</h1> </div> </body> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#app', data: { mensaje: '¡Hola Vue.js 2!' } }); </script> </html>

Hemos creado un archivo index.html en el que hemos importado Vue como script. En él hemos escrito la estructura de nuestro html y el funcionamiento de Vue en el interior de otra etiqueta script. El archivo está en el repositorio del libro. 2.1- ¡Hola movida!

Aprende Vue2.js desde cero

2.2 - LA ETIQUETA <pre></pre> Vue.js nos proporciona la etiqueta <pre></pre> para poder ver los datos mientras desarrollamos. Su uso es muy sencillo, y de ahora en adelante la utilizaremos. Solo tenemos que escribir en su interior la variable $data entre dobles llaves y añadirla al final de nuestro HTML, dentro del elemento en el que se carga Vue. En el ejemplo anterior quedaría así: HTML <html> <body> <div id="app"> <h1>{{ mensaje }}</h1> <pre> {{ $data }} </pre> </div> </body> <script src="https://unpkg.com/vue"></script> <script type="text/javascript" src="main.js"></script> </html>

JS new Vue({ el: '#app', data: { mensaje: '¡Hola Vue.js 2!' } });

main.js

De esta forma, obtendremos debajo de nuestra vista un diccionario en formato JSON con los datos de nuestro modelo. El que vemos ahora es muy sencillo porque tan solo contiene un dato, 'mensaje', pero conforme vayamos avanzando podremos ver cómo cambian y se actualizan los datos en base al funcionamiento que le demos a nuestros componentes.

Puedes descargar el archivo en GitHub: 2.2- Etiqueta <pre></pre>

Alejandro Bayo Saiz

2.3 - DATA BINDING. UNIÓN BIDIRECCIONAL DE DATOS EN LA VISTA Lo que mola de Vue es que nos hace la vida más sencilla. Siguiendo el ejemplo anterior, vamos a crear un modelo que se comunique con la vista de tal forma que lo que escribamos en un input cambiará el contenido del encabezado h1. Esto lo conseguiremos con v-model, una de las muchas directivas que Vue pone a nuestra disposición. Por ahora, vamos a escribir nuestro código, esta vez en archivos separados: HTML <html> <body> <div id="app"> <h1>{{ mensaje }}</h1> <input type="text" v-model="mensaje"> <pre> {{ $data }} </pre> </div> </body> <script src="https://unpkg.com/vue"></script> <script type="text/javascript" src="main.js"></script> </html>

index.html

* A partir de ahora, el código HTML lo escribiremos dentro de la etiqueta <body> para no repetir datos y tratar solo en el área de código necesaria.

JS new Vue({ el: '#app', data: { mensaje: '¡Hola Vue.js 2!' } });

main.js

Puedes descargar el archivo en GitHub: 2.3 - Data binding

Aprende Vue2.js desde cero

2.4 - DEBERES Vamos a crear lo siguiente. Un encabezado h1 con un saludo personalizado. Habrรก un input en el que al escribir nuestro nombre actualice los datos y haga cambiar el encabezado para mostrarnos un saludo personalizado. El resultado tiene que ser el siguiente. ยกEspero que disfrutes haciendo el primer ejercicio del libro!

SOLUCIร N Puedes descargar la soluciรณn en GitHub: 2.4 - Deberes

Alejandro Bayo Saiz

Aprende Vue2.js desde cero

Alejandro Bayo Saiz 40