Angel Vazquez Vazquez - Aprender VueJS con 100 ejercicios prácticos

PRIMEROS PASOS CON ATOM

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].