Introducción a Vue.js

7 Abr

Bueno, revisando un poco en la web, me encontré con Vue.js, el cual a primera vista parece emular a Angular, sin embargo, a medida que vas probando cosas, te das cuenta que a diferencia del primero, la curva de aprendizaje es mucho más sencilla.

Para resumir un poco de qué se trata para los que no hayan visto nada de esto, Vue es una librería de Javascript que nos permite separar la lógica de la presentación en una aplicación frontend, permitiendo que los datos dinámicos puedan impactarse visualmente.

Aquí dejo el enlace para revisar documentación de forma más amplia:

https://vuejs.org/

Sin más palabrería pasemos a la acción.

Instalación

Existen muchas formas de instalar Vue.js, pero yo voy a usar la más sencilla. Vamos al siguiente enlace:

https://vuejs.org/v2/guide/installation.html

Y presionamos en el botón que dice “Development Version”. Nos va a descargar un archivo .js, y vamos a incluirlo en nuestro código con un simple:

<script type="text/javascript" src="vue.js"></script>

Ejemplos

<div id="app">
   <h1> {{ nombre }} {{ apellido }} </h1>
   <input type="text" placeholder="Ingrese su nombre" v-model="nombre" />
   <input type="text" placeholder="Ingrese su apellido" v-model="apellido" />
 </div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   var app = new Vue({
      el: '#app',
      data: {
         nombre: 'Lalo',
         apellido: 'Landa'
      }
   });
</script>

En primer lugar creamos un controlador, que es una instancia de Vue, el cual va a recibir un objeto de tipo json como parámetro.

new Vue({
   el: '#app',
   data: {
      nombre: 'Lalo',
      apellido: 'Landa'
   }
});

Entonces definimos el elemento visual (html) al que le damos la lógica, en nuestro caso es ‘#app’. Al igual que en una hoja de estilos css o en jquery, para referirnos a un elemento por su id debemos usar el signo # adelante. Esto permitirá que el div al que le asignamos ese id, esté vinculado con la instancia de Vue que acabamos de crear.

Los atributos (data) del código Javascript estarán vinculados con los del html.

En ese caso cada cambio que haya en:

data: {
      nombre: 'Lalo',
      apellido: 'Landa'
}

Se impactará en:

<input type="text" placeholder="Ingrese su nombre" v-model="nombre" />
<input type="text" placeholder="Ingrese su apellido" v-model="apellido" />

Si revisamos bien “nombre” de “data” coincide con v-model. Esto significa que cuando cambie uno, también lo hará  el otro.

Métodos

Así como cualquier objeto, a la instancia Vue debemos pasarle atributos (data), que son información como variables propias. Pero también necesitamos acciones o métodos, que son procesos de la misma manera que trabaja una función:

<div id="app"> 
   <button type="button" v-on:click="generarNumeroAlAzar()"> Generar número al azar </button>
   <strong> {{ numero }} </strong>
 </div>
 <script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
    var app = new Vue({
       el: '#app',
       data: {
          numero: ''
       },
       methods: {
          generarNumeroAlAzar: function(){
             this.numero = Math.floor((Math.random() * 1000) + 1);
          }
       }
    });
 </script>

En este ejemplo, simplemente tenemos un botón, que al pulsar nos mostrará por pantalla un número que se genera al azar. Ahora sabemos que el atributo “el”, nos permite definir el elemento padre al que le damos funcionalidad, y el atributo “data”, sirve para trabajar con los datos de éste, mientras que “methods”, serán las acciones.

Nosotros necesitamos un atributo que guarde un número al azar, pero también un método que lo haga cambiar.

Mediante el evento v-on:click, podemos ejecutar un método cuando se hace clic en el elemento en donde lo necesitemos:

v-on:click="generarNumeroAlAzar()"

Que se encuentra dentro de los métodos definidos:

methods: {
   generarNumeroAlAzar: function(){
      this.numero = Math.floor((Math.random() * 1000) + 1);
   }
}

Mostrar u ocultar elementos

Con vue podremos definir condiciones dentro de nuestro código html, por ejemplo una etiqueta puede estar presente siempre y cuando se cumpla una condición:

<div id="app"> 
   <label>
      <input type="checkbox" v-model="imagen_visible" />
      Mostrar / Ocultar imagen
   </label>
   <br />
   <img v-if="imagen_visible" src="https://vuejs.org/images/logo.png" alt="" />
 </div>
 <script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
    var app = new Vue({
       el: '#app',
       data: {
          imagen_visible: true
       }
    });
 </script>

Si observamos bien, la etiqueta img:

<img v-if="imagen_visible" src="https://vuejs.org/images/logo.png" alt="" />

Podemos ver que tiene una condición mediante un atributo de nombre “imagen_visible”, osea que esta etiqueta va a existir, siempre y cuando el valor de ésta sea true.

Pero a su vez, ese atributo cambiará su valor, dependiendo de si el checbox está tildado o no:

<input type="checkbox" v-model="imagen_visible" />

Hablando en criollo, la imagen va a existir, siempre y cuando el checbox esté tildado.

Bucles

También podemos realizar ciclos de repetición:

<div id="app"> 
   <ul>
      <li v-for="item in lista">
         {{ item.nombre }} / {{ item.pais }}
      </li>
   </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   var app = new Vue({
      el: '#app',
      data: {
      lista: [
            {nombre: 'Lionel Messi', pais: 'Argentina'},
            {nombre: 'Luis Suárez', pais: 'Uruguay'},
            {nombre: 'Neymar', pais: 'Brasil'}, 
            {nombre: 'James Rodríguez', pais: 'Colombia'},
            {nombre: 'Andrés Iniesta', pais: 'España'},
            {nombre: 'Chicharito Hernández', pais: 'México'}, 
            {nombre: 'Alexis Sánchez', pais: 'Chile'},
            {nombre: 'Paolo Guerrero', pais: 'Perú'},
            {nombre: 'Paraguay', pais: 'Justo Villar'},
            {nombre: 'Marcelo Moreno Martins', pais: 'Bolivia'},
            {nombre: 'Walter Ayoví', pais: 'Ecuador'},
            {nombre: 'Salomón Rondón', pais: 'Venezuela'},
         ]
      }
   });
 </script>

En este último caso tenemos un atributo con un array, en donde cada posición es un json con dos atributos: “nombre” y “pais”.

A continuación dejo el repositorio para descargar todos los ejemplos que vimos hasta hoy:

https://github.com/fernandoggaitan/vuejs_introduccion

Saludos!

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


    *