VueJS – Mas que sencillo

Nota: todo esto sacado de la documentación oficial de Vue… aclarando que es gerundio.

– “y entonces, por que no ir directamente a la documentacion oficial?”

Buen punto. Porque la documentación oficial es para entender completamente la herramienta, por lo que empiezan por explicar que es, que ventajas tiene sobre otros FW, como se instala, un ejemplo (que luego no te va  a servir, porque los componentes se arman de otra manera), etc,etc,etc… 
Pasas por  “Introducción”, “Qué es Vue.js?”, “Empezando”, “Renderización Declarativa”, … un monton de paginas mas, hasta que llegas a “Conceptos Básicos de Componentes”. 
No digo que este mal, para nada, pero yo lo voy a encarar directamente haciendo un componente simple (de eso va la librería, de componentes) y luego iré incorporando los diferentes conceptos en ese ejemplo.

Vue es un FW , librería, o como quieras llamarle, que permite construir páginas, apps, sitios… , mediante componentes, que tienen a su vez propiedades reactivas.

Esto de la reactividad es más viejo que la escarapela. Aquellos que programaron en Delphi recordarán que podían conectar los fields de un formulario a un dataset, y cuando se actualizaba un field también se actualizaba el valor en en el dataset , solamente había que disparar un Update para persistirlo en una DB. También, si cambiaba el registro en el dataset, se actualizaban los fields en el form.

Acá mas o menos es lo mismo, propiedades reactivas significan eso, que si las actualizo en el formulario se me actualizan en el componente, y si las cambio en el componente se reflejan en el formulario.

Mejor un ejemplo que vale por mil palabras, tomado de la documentación de Vue, el que vamos a explicar rápidamente

<div id="components-demo">
  <button-counter></button-counter>
</div>

Tenemos un contenedor con un id, que será nuestra app Vue, y dentro de ese contenedor un tag que no existe en el estándar HTML: ese es nuestro componente que posteriormente definiremos

Nuestra app Vue la inicializamos simplemente con la siguiente línea de código, no creo que necesite mas explicación, se instancia una clase Vue, a la que se le pasa como parámetro un objeto con la propiedad ‘el’, que es el id (kuak) del contenedor de la aplicacion:

var app = new Vue({ el: '#components-demo' })

Y con estas lineas de código definimos nuestro componente:

Vue.component('button-counter', { 
    data: function () { 
      return { 
        count: 0 
      }
    },
    template: 'Me ha pulsado {{ count }} veces.' 
})

Acá, un poco más de detalle:
con el método component() definimos un nuevo componente, al que le pasaremos un string, que será el tag en el html, y un objeto de inicialización, con un montón de propiedades, de las cuales, de momento solo usaremos 2: data y template.

data: aquí vamos a definir las famosas propiedades reactivas. Estas propiedades serán accesibles desde el template, bien para mostrarlas con {{ counter }}, o accediendo a ellas a través de “directivas” de Vue (mas adelante veremos que son).

Importante: para la definición de componentes esta propiedad tiene que ser una función que retorne las propiedades reactivas que utilizaremos, quédense con esto, para los componentes es así.

template: aquí definimos como se renderiza el componente, básicamente esto:

<button v-on:click="count++">Me ha pulsado {{ count }} veces.</button>

Va a crear un button que, a través de la directiva v-on:click incrementara el valor de la propiedad reactiva count, que a su vez disparará (por eso de la reactividad) la actualización del componente.

Bueno, nuestro index.html completo sería algo así:

<html>
  <body>
    <div id="components-demo">
      <button-counter></button-counter>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  
  <script>
    // Definicion del componente
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">Me ha pulsado {{ count }} veces.</button>'
    })
    
    // inicializacion de nuestra Vue App, dentro de #components-demo
    // IMPORTANTE: la inicializacion hay que hacerla LUEGO de definir los componentes
    var app = new Vue({ el: '#components-demo' });
  </script>
</html>

Nuestro ejemplo funcionando:



Y esto es todo por hoy, en el proximo capítulo veremos un poco de templates, hasta la proxima!

Leave a Reply