Vue.js, potente framework ¿Cómo empezar? ¡Fácil y rápido!

Vue.js es un framework para crear interfaces de usuario, muy parecido a Polymer y a la vez a React, pero también tiene cosas de Angular. Es un framework relativamente pequeño al que puedes ir adaptando a tus necesidades y hacerlo mucho más robusto a través de librerías y herramientas modernas como webpack.

Es uno de los frameworks mejor documentados y con la menor curva de aprendizaje, así que si no tienes experiencia utilizando algún framework parecido, este es el primero que recomiendo que aprendas.

Interpolación

Para empezar a utilizar Vue.js juega con este ejemplo donde creamos nuestra primera implementación con Vue.

Si nos damos cuenta la propiedad mensajeof the object dataha sido pintada, pero no solo se pintó data.mensajeen la página, sino que tanto el DOMcomo dataestán enlazados y se comportan de manera reactiva, ¿Cómo lo sabes?, en el código guardamos una instancia de Vue en una variable llamada app, esta variable está definida globalmente, por lo que si damos click derecho sobre la página que nos genera codepen, es la parte derecha con fondo blanco y dice Hola soy Vue.js, luego Inspeccionar elementoy nos vamos a la pestaña consola(console), podremos obtener la referencia a esa instancia y modificar sus datos.

Inténtalo de esta manera:

app.mensaje = 'Nuevo mensaje';

Deberás ver en la página como el texto se actualiza automáticamente reaccionando al cambio. Por el momento recuerda que los elementos del datareaccionan al cambio en el DOM y/o directamente cambiando el valor en el código.

Lo que hicimos con {{}}se le llama interpolación, es decir, realiza la operación necesaria para obtener el resultado de mensaje. En este caso nos regresa un resultado en forma de una cadena, podemos utilizarlo también en atributos.

Interpolación en atributos y directivas

Ahora la interpolación se hizo a través de un atributo raro v-bind, a este tipo de atributos se les llama directivas, una directiva son atributos creados por Vue y tienen el prefijo v-, estas directivas aumentan el funcionamiento de un determinado elemento, en este ejemplo pudimos aumentar el funcionamiento del atributo titleen el elemento spanpara que muestre la propiedad mensajede manera reactiva cuando pasamos el cursor del mouse. En otras palabras, se crea un enlace de comunicación el cual permite actualizar la información.

Directiva condicional v-if

Ahora veamos una directiva muy útil v-if , que nos permite pintar o no un elemento basándose en una condición de nuestra aplicación.

Esta interpolación recibe un valor falso, es decir, un valor que se convierte en un boleano false, aquí te dejo una lista de estos valores. Importante, todos los valores que no estén en la lista se convierten en valores verdaderos cuando se ejecutan en una condición.

• false
• null
• undefined
• 0
• cadena vacía “”
• El numero NaN (Not a Number)

Directiva repetidora v-for

Esta directiva, muy parecida al forde Javascript te permite iterar sobre los elementos de un arrayo un object.

Al igual que el primer ejemplo, puedes acceder a la variable global appy cambiar el valor de buenosHabitospara que la lista con v-forreaccione a los nuevos datos.

app.buenosHabitos = ['Ir a nadar', 'Dormir temprano'];

Interacción con el usuario usando v-on y v-model

La directiva v-onpermite agregar escuchadores de eventos a elementos HTML, y definir que método de nuestra instancia de Vue ejecutar cuando se dispara el evento. A nuestra instancia le podemos agregar métodos en su propiedad methodscomo se ve en el ejemplo:

También en el ejemplo usamos la directiva v-model, la cual nos permite actualizar los datos en dos direcciones, es decir, desde el input y hacia él, si cambiamos su valor, se refleja como se actualiza el texto que aparece después del botón, y también si oprimimos el botón, vemos como el cambio se refleja en el input y en el texto al revés.

Espero y te sirva este post, comenta si así lo fue y que tipo de temas te gustaría que se explicaran en futuros artículos.