Turorial Vue básico en 30 minutos: Qué es, para que nos sirve y ejemplos

▶

En esta entrada veremos los primeros pasos con este framework llamado Vue que es el boom de hoy en día, el framework JavaScript que está más de moda; daremos un vistazo rápido a las características de Vue, donde instalarlo, como descargar Vue, haremos una sencilla comparación de Vue con jQuery y posteriormente daremos unos pequeños ejemplos para empezar a trabajar con Vue.

¿Que es Vue y para qué nos sirve?

Vue es un Framework progresivo, lo que significa que sirve para consumir la interfaz del usuario; fue creado por Evan You que trabajaba en Google para ese entonces; Vue surgió en el año 2014, como puedes ver es un framework reciente con "poco" tiempo en el mercado pero que está muy pulido, cuenta con una buena acogida por los usuarios, una comunidad creciente, buena documentación y facilidades de uso que no requieren ni siquiera usar Node para emplearlo lo que es una gran ventaja que tiene con respecto a la competencia.

Características de Vue

Vue es un framework progresivo, lo que significa que podemos emplearlo para algo muy básico, igual que jQuery o sistemas más grandes y complejos y en general cuenta con un rendimiento muy bueno para lo poco que pesa:

• Vue es un framework accesible que está a la disposición de todos mediante código libre.
• Es un framework muy pequeños que nos facilita enormemente la interacción con la interfaz o el HTML.
• Optimizado; su núcleo es muy pequeño y ocupa unos 70Kb lo que es bastante liviano.
• Como indicamos antes, cuenta con una comunidad creciente y buena documentación con una curva de aprendizaje baja ya que es sencillo de emplear y muy conciso.

¿Cómo instalar Vue?

Como hemos indicado en sus características, tenemos varias forma de instalar Vue, si queremos instalarlo para hacer cosas sencillas, sin emplear componentes, nos basta emplear el script disponible en la CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

Ahora si queremos emplearla para hacer cosas más complejas, emplear componentes, etc podemos emplear el Vue cli que nos permite agregar componentes, páginas, y total control sobre nuestro proyecto desde la línea de comando que veremos en otras entradas.

Para instalar Vue nos vamos al sitio oficial en:

Desde la web veremos que lo podemos instalar mediante un módulo npm, pero también podemos descargarlo con un archivo JavaScript cualquiera y copiarlo en nuestro archivo HTML.

Vue cuenta con una herramienta llamada Vue Cli que nos permite instalar plugins y de esta forma extender sus funcionalidades, podemos crear proyectos basados en esta tecnología fácilmente, sin embargo la manera más fácil de iniciar es mediante la inclusión de la URL anterior como haremos en esta entrada; ya quedará para entradas más avanzadas emplear la herramienta Vue Cli integrarlo con Laravel o Codeigniter, etc.

Vue vs jQuery

Lo primero que tienes que tener en cuenta es que son dos mundos apartes, dos paradigmas diferentes que buscan hacer lo mismo, aplicaciones webs de manera sencilla, jQuery cuenta con una inmensa cantidad de plugins y nos da ese plus que no tenemos con JavaScript nativo y Vue también nos da una importante cantidad de plugins y nos permite ganar en organización, optimizando a nivel de código hasta el mínimo para hacer cosas que son generales como veremos a continuación.

Hay muchas razones por las cuales podemos emplear framework como Vue que son progresivos en vez de jQuery o frameworks similares; Vue nos ofrece una organización mayor (aunque en la práctica jQuery no nos ofrece ninguna organización ni patrón de desarrollo) a la que nos ofrece jQuery, son códigos más fáciles de entender y de mantener ya que cuenta con componentes y el patrón te templates de Vue que vimos en la sección anterior; un punto muy fuerte es como veremos en otras entradas de Vue es la potente interacción en base a eventos, podemos establecer modelos o variables en Vue y atarlas a un elemento en HTML y modificarlo en donde queramos, es decir si modificamos la variable desde JavaScript, este cambio se verá reflejado en la variable; lo mismo ocurre si lo modificamos en un elemento HTML.

Podemos referenciar variables en el HTML como si un template se tratase y este se imprimirá y actualizará en tiempo real si la variable sufre cambios sin que nosotros hagamos algo.

Ya queda por tu parte imaginarte cómo hacer esto con JavaScript nativo o jQuery, que aunque no es una tarea complicada, como verás en la sección de ejemplos en Vue es algo nativo y funciona muy bien.

Podemos imprimir arreglos fácilmente y desde el mismo HTML empleando unas cláusulas especiales que el mismo vue procesa internamente, en el caso de jQuery tendríamos que iterar todo mediante un for o each dentro del bloque script

A la final una tecnología no tiene porqué solapar a la otra, todo depende del proyecto que lleves a cabo y de acoplar de manera inteligente una u otra tecnología, inclusive las dos sin ningún problema.

Algunos Pros de jQuery

• Poder realizar peticiones Ajax fácilmente.
• Un set de animaciones extensible mediante plugins.
• Miles de plugins a tu disposición.

Algunos contras de jQuery

• Debes de manejar cada elemento HTML independientemente.
• El sistema de renderizado (mostrar contenido en HTML) es lo típico y algo obsoleto comparado con otras tecnologías.
• Es un dolor de cabeza cuando la aplicación crece, ya que carece de organización.

Algunas ventajas de Vue

• Estupendo sistema para renderizar de JavaScript a HTML como si de una plantilla se tratase.
• Curva de aprendizaje baja.
• Organización mediante componentes.
• Extensible mediante componentes.
• Vue Cli para crear aplicaciones SPA.

Algunas desventajas de Vue

• No realiza peticiones Ajax de manera nativa.
• Es una tecnología en evolución, siempre cambiante.

Claro que jQuery cuenta con importantes plugins y métodos que nos facilitan enormemente la vida, así que dependiendo del enfoque de tu proyecto puedes seleccionar uno o el otro o inclusive los dos y emplear los elementos más fuertes de cada uno de ellos.

¿Por qué empezar a usar Vue?

Como mencionamos antes, no debemos de aferrarnos a una tecnología u otra, cada una de ellas tiene sus ventajas y sus desventajas se pueden hacer las mismas cosas desde distintas formas así que dependiendo de lo que quieras hacer selecciona una u otra tecnología; Vue nos permite ganar tiempo al momento de crear aplicaciones con las cuales vamos a manipular bastante el DOM del HTML debido a como está concebido, pero hay muchas otras herramientas más específicas que puedes emplear también dependiendo de lo que desees realizar.

Reactividad en profundidad

¡Ahora es el momento de sumergirse en profundidad! Una de las características más distintivas de Vue es el sistema de reactividad discreto. Los modelos son objetos de JavaScript con proxy. Cuando los modifica, la vista se actualiza. Hace que la administración del estado sea simple e intuitiva, pero también es importante comprender cómo funciona para evitar algunos errores comunes. En esta publicación, vamos a conocer algunos de los detalles de la reactividad de Vue.

¿Qué es la reactividad?

La reactividad está ligada a las propiedades que definimos en las opciones de data; Vue irá detectando cada vez que modificamos dichas propiedades.

Cada una de estas propiedades, tiene un watcher interno al framework que detecta cuando existen cambios en la misma y al detectar, dispara la opción de render (del template) dando como resultado que vemos los cambios reflejados en esa propiedad en la lógica que tengamos definida en nuestro template; es importante señalar, que el proceso de render es ejecutado SOLO si los cambios en la propiedad afectan al template;

En la práctica tenemos un proceso muy optimizado al momento en el que Vue actualice el DOM (template)

Ejemplos de Vue: creando nuestras primeras aplicaciones

En esta sección veremos cómo emplear lo básico de Vue, se les recuerda que Vue como framework que es puedes expandir sus funcionalidades mediante plugins y cuenta con su propio sistema de líneas de comandos mediante Vue Clic, pero podemos hacer cosas realmente interesantes con Vue empleando un mínimo de JavaScript en comparación con jQuery o incluso el JavaScript nativo:

Renderizado declarativo

Como una característica muy potente, Vue cuenta con su propio sistema de renderizado en el que en el HTML que definimos el ámbito de Vue, podemos renderizar valores de variables declaradas JavaScript y referenciadas en HTML como vemos a continuación:

<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: "Hola Vue"
        }
    })
</script>

Esto nos dá la siguiente salida:

Como puedes ver es una característica muy potente de Vue, hoy en día que recibimos datos de todas partes, podemos referenciar fácilmente variables, ganando legibilidad y organización en JavaScript como nunca.

Podrías pensar algo como "Ok ok podemos imprimir variables en el HTML con unas llaves que mas puede hacer".

Condicionales en Vue

Otra característica muy común es que queremos mostrar cierto bloque HTML si pasa algo, u ocultarlo, para esto están los condicionales; por ejemplo para el siguiente código:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:true,
			name: 'Andres'
        }
    })
</script>

De esta forma, si cambiamos el valor de la propiedad isActive a false entonces no se mostraría el h1 definido en el HTML; para el ejemplo anterior la salida sería como la siguiente:

Pero podemos colocarle una cláusula else o mejor v-else como la siguiente para mostrar otro mensaje, bloque de código o lo que prefieras:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

Y hasta podemos colocar el típico v-else-if para colocar más condiciones como en el siguiente caso:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

La directiva v-if

La directiva v-if funciona como si fuera un condicional, permite evaluar condiciones de verdadero y falso que puedes estar en funciones, propiedades, etc

    <input v-if="setDefaultValue" type="number" v-model="valor" />
    <div v-else-if="valor == 5">Los dioses me dicen que valor es 5</div>
    <div v-else>Ya no hay campo jaja</div>

Como puedes ver; puedes atarle el else y el else if cuyo funcionamiento es igual al de un condicional, por lo tanto, puedes anidar condiciones.

Por aquí el bloque de JavaScript:

data() {
   return {
     valor: 0,
     setDefaultValue: true,
   };
 },

La directiva v-for: Bucles en Vue

Lo siguiente que veremos es el uso de los bucles en Vue; para ello es la directiva v-for a la cual debe referenciar una colección de elementos; por ejemplo:

<div id="app">
    <ul>
		<li v-for="post in posts" :key="post.id">{{post.title}}</li>
	</ul>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			posts: [
				{id: 1, title:"Entrada 1"},
				{id: 2, title:"Entrada 2"},
				{id: 3, title:"Entrada 3"}
			]
        }
    })
</script>

Vemos varias características interesante, lo primero que vemos es que definimos una lista desordenada para mostrar los elementos de array que la tenemos definida como propiedad que simula el contenido de 3 entradas; en la directiva v-for que se encuentra dentro del elemento li definimos una key que es opcional para indicar el identificador del elemento; es algo interno de Vue, lo siguiente que vemos es el renderizado básico de la propiedad posts que lo tratamos como si un array se tratase; la salida es la siguiente:

Con esta directiva podemos iterar listados; es decir, arrays:

    <div v-for="c in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

O la forma más completa, con el índice y el elemento:

    <div v-for="(c, index) in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

O con el array y/o basados en componentes:

    <hello-world v-for="c in [1, 2, 3, 4, 5]" v-bind:key="c.id" />
    <br />

Con los ciclos en pocas palabras, podemos repetir múltiples veces ya sea una etiqueta HTML o un componente de Vue.

Por aquí el bloque de JavaScript:

data() {
   return {
     array: [
       {
         id: "123",
         name: "andres",
       },
       {
         id: "1234",
         name: "juan",
       },
     ],
   };
 },

Eventos de usuario

Con Vue podemos controlar los eventos de usuario, click, focus y demás empleando la directiva v-on seguido del evento que vamos a registrar; por ejemplo para el evento clic:

<script src="vue.js"></script>
<div id="app">    
	<h1 :style="{color:'red', fontSize: fontSize+'px'}">{{message}}</h1>
	<button @click="increateFont">Increase</button>
	<button @click="decreateFont">Decrease</button>

</div>
</div>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			message: "hola",
			fontSize:12
        },
		methods:{
			increateFont(){
				this.fontSize++
			},
			decreateFont(){
				this.fontSize--
			}
		}

    })
</script>

Raw o renderizar HTML en Vue

▶

Muchas veces tenemos en una propiedad o función un contenido HTML que queremos renderizar directamente en el template; si lo hacemos de la manera corriente con las llaves llaves {{}} no se va a obtener el resultado deseado, tenemos que emplear la directiva v-html en su lugar e indicarle la propiedad o función.

    <!-- **RAW HTML -->
    <p>
      {{ rawhtml }}
    </p>
    <p v-html="rawhtml"></p>
    <!-- **RAW HTML FIN-->

Y en el JavaScript

rawhtml: "<span style='color:red'>Hola texto rojo</span>",

Puedes consultar el repo para más información.

Alias para las importaciones en Vue

▶

En Vue, para evitar tener sintaxis como la siguiente al momento de ir cargando componentes aparte desde distintas ubicaciones de tu proyecto:

import Base from "../../components/Base" 

La cual se complica más, dependiendo de donde importamos; por ejemplo si estamos en ubicaciones más internas y tenemos que navegar a archivos superiores; tenemos que seguir con esta navegación.

En vez de usar este tipo de sintaxis, podemos usar un alias, en cual apunta directamente a la carpeta source (src) de nuestro proyecto; por lo tanto, sin importar de donde se encuentren nuestros elementos, siempre tenemos un acceso directo a nuestra carpeta src; con esto nuestras importaciones quedan muchas más concisas, legibles y directas; para esto, tenemos que usar el arroba @:

import Base from "@/components/Base"

Estilos locales y globales a los componentes scoped Vue

▶

En Vue, podemos aplicar reglas de estilos de manera global, para toda la aplicación o que solamente aplique en un único componente.

Vue es un marco que fue creado para aplicaciones modulares, es el nuevo esquema que no es tan nuevo, pero que poco a poco va evolucionando bajo un mismo lineamiento en el cual requerimos que todo sea perfectamente modular e integrable con otros módulos o submódulos; en vue a estos módulos se les llaman componentes en los cuales tenemos unas minis aplicaciones que hacen una tarea en particular; recordemos que, siguiente la estructura de una aplicación en Vue, en un componente, tenemos:

1. template
2. script
3. css

Esto es un componente, en cuando al template y el script sabemos que fácilmente corresponde o vive en el mismo componente, pero el estilo al tratar con hojas de estilos en cascadas, CSS la cosa cambia un poco, ya que una de las características que tenemos en este lenguaje, es que es global a TODA la app, y a la final no importa cuantos desestructura tu app en componentes, que a la final va a ser UNA sola aplicación ejecutándose en un navegador; por lo tanto el CSS que coloques a la final en cada componente, se va a regar al resto cuando ejecutes tu app!

Suponte el siguiente esquema; tenemos en nuestro App.vue un template que carga dos componentes:

En el App.vue:

<template>
  <mi-primer-componente/>
  <hello-world/>
</template>
<script>
import MiPrimerComponente from ',/components/MiPrimerComponente'
import HelloWorld from './components/HelloWorld'
export default {
  components: {
    MiPrimerComponente,
    HelloWorld
  },
}
</script>

El uso de componentes lo vemos más claramente en la entrada en la cual creamos una app en Vue tipo CRUD que consume una Rest API.

Componente 1: Hello World

Tiene un H1 al cual quiero colocar un color de azul

<template>
  <h1>C1<h1/>
</template>
<style scoped>
 h1 {
     color: blue
 }
</style>

Componente 2: Mi Primer Componente

Tiene un H1 al cual quiero colocar un color de rojo

<template>
  <h1>C2<h1/>
</template>
<style scoped>
h1 {
  color: red;
}
</style>

Cuando renderizas tu app, tienes el siguiente resultado:

Solamente te va a aparecer un solo color, que puede que sea rojo o puede que sea azul, pero NO es lo que especificamos, ya que queríamos un color para el H1 diferente por cada componente.

Definiendo el scope de estilos

Como indicamos, al tener componentes, es probable que no quieres que choquen tus estilos, por ejemplo puedes que tengas un componente de listado en el cual le das estilo a un div para que muestre un item, pero este elemento div, puedes que lo uses para el banner, footer, barra lateral y si no hacemos algo, chocaran estos estilos de una manera espantosa!

Para indicar que queremos que cada estilo se quede en su componente, tenemos el atributo scope, que le definimos a las hojas de estilo, por lo tanto, para nuestros componentes, si queremos que el estilo que definen sea local al mismo y NO extienda como una "Cascada" a otros componentes hermanos, hijos o padres...:

<style scoped>
h1 {
  color: red;
}
</style>

Tienes que colocar scoped para cada estilo que quieres que sea local a ese componente

Ya con esto, tenemos el resultado esperado:

Vue devtools: Debug a tus apps

▶

Las Vue devtoools son unas herramientas fantásticas que nos permiten hacer debugs fácilmente a nuestras aplicaciones en Vue; la razón de esto, es que cuando creamos una app en Vue, en base componentes, todo a la final termina en un solo archivo y si una pieza o componente falla o queremos hacerle un seguimiento y hacemos debug a dicha aplicación con las herramientas que ya conocemos:

Como puedes ver, no vemos nada relacionado a nuestra app en componentes; para poder hacer un debug como dios manda y poder ver componentes y propiedades, tenemos que instalar las devtools que lo tenemos en la mayoría de los navegadores modernos como Firefox o Google Chrome; en el caso de Google Chrome:

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Con esto, tenemos un nueva nueva pestaña en nuestra consola de desarrolladores.

En la cual como puedes ver, vemos la app como realmente es. Esta extensión es ideal para poder seguir esta guía.