PDF de programación - Introducción a Vue.js

Introducción a Vue.js

abril 27, 2017

Mauro Caffaratto Grandes

Sin comentarios



Tutoriales

1. Introducción
En este tutorial veremos qué es y cómo funciona el framework vue.js, y cuáles son sus fortalezas y debilidades respecto a otros
frameworks similares, como angular.js o react.

Índice de contenidos

1. Introducción
2. Entorno
3. ¿Qué es vue.js?
4. Introducción a los view-models
5. La instancia Vue
6. Propiedades de una instancia Vue
7. Componentes
8. Ecosistema
9. Conclusiones
10. Referencias

2. Entorno
Cualquier editor de texto y cualquier navegador compatible con ES5 te valdrá para ejecutar el código que encontrarás en este tutorial.

3. ¿Qué es vue.js?
Vue.js es, en palabras de Evan You, su creador, un framework progresivo para crear interfaces de usuario.

Vue se basa en una implementación muy ligera del patrón view-model que nos ayudará a relacionar nuestra capa de presentación con
nuestra capa de negocio de forma sencilla y eficiente.

A lo que se refiere You con ‘progresivo’, es a que es muy fácil añadir Vue.js a cualquier proyecto ya existente y poder aprovechar su
funcionalidad casi sin complicaciones. Por el contrario, otros frameworks como Angular son mucho más opinionados y están más
orientados a comenzar proyectos desde cero, y con una arquitectura predeterminada que viene dirigida por el framework.

You era un ingeniero front-end de google, y precisamente esto es lo que no le gustaba de Angular, aunque sí le parecía que el data-
binding y las directivas de Angular eran una gran idea. Vue comenzó originariamente como un proyecto que aspiraba a reproducir este
set mínimo de funcionalidades de Angular sin obligar al usuario a amoldarse a una determinada arquitectura. Comenzó a trabajar en
Vue en 2013 y lo publicó en github en febrero de 2014.

Actualmente Vue ha tenido un gran impacto y hay varias compañías de renombre que utilizan Vue en su front-end, como Gitlab,
Alibaba o Nintendo. Vue, seguramente debido a que Evan You es chino, ha tenido mucho impacto en compañías asiáticas.

Vue.js se caracteriza por ser uno de los frameworks javaScript de mayor rendimiento, gracias a una implementación muy ligera del
llamado virtual dom. Aunque su núcleo se centra unicamente en la capa de vista y no provee herramientas de routing o control de

estado, hay muchas herramientas del ecosistema de Vue para escarlarlo y crear SPA’s complejas. A sus fortalezas añade su
adaptabilidad: se puede añadir a aplicaciones web ya existentes y aprovecharlo sin mayores problemas de instalación, simplemente
cargándolo desde un <script>, pero también utilizarlo para crear aplicaciones complejas con un proceso de build que utilice
commonJS o módulos ES6, hot module replacement y demás ventajas de bundlers como webpack o browserify durante el proceso de
desarrollo.

4. Introducción a los view-models
El patrón view-model o Model-view-view-model consiste en añadir una capa de lógica entre nuestra capa de negocio y nuestra capa de
UI para evitar que una tenga que comunicarse directamente con la otra: cuando la vista -la representación de una entidad en la capa de
presentación-, o el modelo -su representación en la capa de negocio- cambien, el view-model se encargará de actualizar su
contrapartida en la otra capa de forma automática.

esto facilita el testing y permite crear programas más modificables y reusables, a parte de evitar una gran cantidad de código ‘boilerplate’
que actualiza manualmente uno en función del otro.

Supongamos, por ejemplo, que en una página web de venta online de algún tipo de producto, tenemos una entidad ‘pedido’ tal que, en
función de su estado, mostramos o no determinados bloques de html con determinado contenido. Cuando el usuario interactúa con la
página, añadimos o modificamos campos de algún formulario que representa el estado final del pedido y, cuando el usuario quiere
realizar la compra, enviamos ese formulario, que tendrá toda la información relevante, a algún controlador de nuestra página que
procese la transacción.

Realizando este tipo de programas sin utilizar el patrón view-model es fácil que cometamos los siguientes errores:

Mezclemos lógica de negocio con lógica de presentación.
Almacenemos temporalmente información de negocio en el DOM.
Tengamos que gestionar manualmente cómo los cambios en una de las dos capas se reflejan en la otra.
Tengamos que preocuparnos constantemente de declarar y eliminar handlers que escuchen eventos.
Hagamos que lógica que debería ser pura, y por tanto fácil de probar en tests, dependa del estado del DOM, lo que dificulta la
testabilidad y reusabilidad.

Las librerías de interfaz de usuario como vue.js que implementan este patrón, utilizan mecanismos que permiten, declarativa y
automáticamente, comunicar cambios entre la capa de negocio y la capa de presentación. De este modo hay una fuente única de
verdad, el modelo, y el DOM se ajusta a él en función del comportamiento de la aplicación.

Esto implica un cambio de paradigma respecto a la forma en la que se solía trabajar en javaScript con interfaces de usuario. Si antes era
habitual utilizar jQuery constantemente para leer y manipular el DOM, ahora manipulamos únicamente modelos de datos en javaScript, y
dejamos que sea el viewModel el que ajuste el DOM en consonancia.

5. la instancia de Vue
La forma más immediata de trabajar con Vue es instanciar Vue para un tag determinado de nuestra aplicación. Simplemente, crearemos
una nueva instancia de Vue llamándolo como un constructor:

1     new Vue(params);
Es fácil ver cómo funciona la instanciación de Vue a través de este ejemplo en codePen.

En el ejemplo, params es un objeto javaScript con determinadas claves. Este objeto puede tener definidas muchas propiedades,
aunque la fundamental es el que debe ser un string con un selector css indicando para qué elemento aplicará esta instancia de Vue
que estamos creando.

El resto de propiedades de una instancia Vue indican sus datos, métodos que operan sobre estos datos, handlers de eventos que
afecten a ese bloque html, o diversos hooks que podemos utilizar para realizar tareas en algún momento específico de su ciclo de vida.

Una vez hecho esto, podemos utilizar Vue para modificar y completar el html de la aplicación mediante templates y directivas:

Los ‘templates’ son expresiones escapadas entre corchetes en el contenido de nuestro html que Vue interpreta y renderiza de
acuerdo a un modelo de datos. De este modo, podemos utilizar Vue en el front-end de manera similar a cualquier motor de templates
de back-end, como Freemarker, Pug o Jade. En el caso de Vue, todo lo que se encuentra entre ‘{{‘ y ‘}}’ en determinados tags html se
interpreta como javascript y su valor es modificado en función del valor de nuestros objetos.

Las directivas son atributos html que dirigen el comportamiento de la aplicación. Las directivas en Vue.js son muy similares a las
de Angular 1. Por ejemplo, v-if añade o no un tag al DOM en función del valor de algún campo, o v-model enlaza controles de
formularios con variables de nuestro modelo de datos.

Tanto los templates como las directivas están reactivamente enlazados con el modelo de datos: cuando uno cambia, el otro también lo
hace. Esto es lo que se llama two way data binding, y hace que trabajar con formularios usando Vue sea mucho más cómodo que
manejando handlers a mano.

Cuando una aplicación o un caso de uso empieza a tener un tamaño considerable, el two way databinding se considera una mala
práctica, porque podemos tener múltiples elementos de la página modificando el modelo sin control. Por este motivo, cuando se utilizan
componentes, esto cambia y el binding entre los componentes fluye unicamente de los padres a los hijos.

6. Propiedades de una instancia de Vue
Hay varias opciones que podemos especificar al crear una instancia de Vue. Un pequeño ejemplo más o menos completo sería como el
que sigue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

15

  new Vue({
     el : '#app',
     template : `<div v-bind:style="estilos" v-on:click="log()"`,
     data : { titulo : 'Rectángulo', largo : 100, alto : 40 },
     computed : {
         area : function(){ return this.largo * this.alto; } ,
         estilos : function(){
         return {
         width : this.largo + 'px',
         height : this.alto + 'px'
       }
 
      },
     methods : { log : function(){ console.log('Soy un rectángulo con un area de ' + this.area + ' pixels' ); } },
     created : function(){ console.log('se crea la instancia: todavía no se ha reemplazado "#app" por el template de esta
instancia'); },
     mounted : function(){ console.log('ya se ha renderizado el template en el DOM'); }
 
});

16
17
18
Podéis ver ese mismo script funcionando en este codepen. La especificacíon completa de las propiedades de Vue se encuentra en la
documentación de la API de Vue.

Como se vé en el ejemplo, aquí se está instanciando Vue con un objeto que tiene varias propiedades. Vamos a verlos por orden:

El
La propiedad el determina, como ya hemos dicho, el tag html sobre los que operará nuestra instancia Vue. Es un selector CSS como
los que se utilizan en las hojas de estilo o jQuery.

Es importante notar que cada instancia de Vue apunta a un solo nodo html y sus hijos. Podemos utilizar como selector una clase o
una etiqueta, pero la instancia solamente operará sobre el primer nodo que encuentre.

Template

Como template, se indica una cadena con html que reemplazará el html que hemos fijado como el. Nota que hay dos cosas distintas
denominadas ‘template’: todo contenido entre {{}} y la propiedad template de la instancia. Son dos cosas distintas, aunque
generalmente van juntas.

No es necesario usar la propiedad template para trabajar con Vue. Podríamos haber puesto ese mismo código directamente en el html
dentro del div#app y hubiera funcionado de manera