Ownership

Primeros pasos con VueJS

Hace unas semanas os hablamos de los frameworks de JavaScript. A partir de ahora, iremos desgranando cada uno de ellos para conocerlos más en profundidad. Comenzamos con VueJS. Este es, sin duda, uno de los frameworks de JavaScript más intuitivos y fáciles de aprender. Su sencillez a la hora de añadir y quitar módulos de los proyectos hace que empiece a ser uno de los favoritos de la comunidad. ¿Qué lo hace tan simple y querido? En pocas líneas de código descubrirás porque está despuntando en el mercado laboral.

No va a resultar extraño empezar a oír su nombre. Vue (se pronuncia de la misma forma que la palabra inglesa view) es un framework progresivo para el desarrollo de interfaces de usuario. Esto quiere decir que no hace falta que hagamos uso de todo su potencial, si no que podemos coger lo que más nos interese si vamos a realizar un desarrollo simple. Su núcleo está centrado en la capa de vista del MVC, pero es bastante adaptable y tiene la suficiente potencia para crear sofisticadas aplicaciones ‘single-page’ cuando se combina con otras herramientas y librerías. 

Es importante recordar que, antes de empezar de lleno con VueJS, es fundamental tener nociones básicas de HTML, CSS y JavaScript, ya que van a ser los elementos centrales de este framework. De hecho, como se puede comprobar más adelante, todo lo que se desarrolle se podría meter en un solo fichero de HTML. Pero a veces por comodidad y por tenerlo todo ordenado, se tienen archivos diferentes donde guardar los .html, los .css y los .js.

¿Cómo es su instalación?

El proceso de instalación es simple. Tan solo es necesario añadir una línea de código al <body> de nuestro fichero de HTML, aunque hay otras formas para poder descargarlo. 

<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>

Una vez añadido, se debe crear una instancia del DOM dónde vamos a hacer uso de Vue. En nuestro caso utilizaremos el <div id=”app”> para referenciarlo. Ahora vamos a añadir código JavaScript para empezar a desarrollar nuestro ejemplo. Se puede hacer como hemos dicho en el mismo .html entre las etiquetas <script> o utilizar un fichero a parte .js y enlazarlo.

const app = new Vue({
  el: '#app',
  data: {
    mensaje: "Hola Vue!"
  }
})

Hemos añadido una nueva propiedad-objeto llamada “data” donde estarán todas las propiedades y/o modelos de datos que queramos utilizar en la vista. De esta forma podemos mostrar en nuestro navegador el mensaje que hemos creado, indicando a nuestra instancia de Vue que va a tener un tipo de dato llamado mensaje. Se declara entre {{ y }}

<div id="app">
    {{ mensaje }}
  </div>

Parece muy simple. Y realmente lo es. Además, con el beneficio de que ya tenemos enlazado el elemento del DOM a nuestro código y lo hemos convertido en reactivo. Si añadimos la línea de código en la consola de javascript podemos ver cómo cambia dinámicamente. 

app.message = 'Cambiando el texto';

El código final en nuestro .html nos quedaría de esta forma y el navegador nos mostraría el texto: “Hola Vue”. 

<html>
   <head>
      <title>VueJS</title>
   </head>
   <body>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
      <div id = "app">
         <h1> {{ message }} </h1>
      </div>
      <script type = "text/javascript">
            const app = new Vue({
  el: '#app',
  data: {
     mensaje: "Hola Vue!"
  }
})
      </script>
   </body>
</html>

Dentro de data podemos seguir añadiendo elementos que modificarán el elemento del DOM que hemos definido. En este caso hemos añadido la condición de que se muestre si se cumple la condición booleana y que el <div> lleve una imagen. 

data: {
    mostrar: false, 
    mensaje: "Hola Vue!",
    imagen: “/Ruta de nuestra/imagen”
  }

En nuestro .html lo llamaremos de la siguiente forma. Donde v-if es una condición de VueJS que evalúa si es verdadero o falso y con <img :src> buscamos la ruta donde está la imagen. 

<div id="app">
    <div v-if="mostrar">
      {{ mensaje }}
      <img v-bind:src="imagen" />
    </div>
</div>

Esto es solo la punta del iceberg, un primer contacto con la librería para que veas lo que se puede llegar a hacer con ella y todo el potencial que se puede sacar de sus líneas. En su página web podéis encontrar una descripción completa del resto de funciones, bucles, componentes y atributos. La mayoría tienen un ejemplo dinámico para que veáis su funcionalidad de la mejor forma posible. 

Además, su curva de aprendizaje es muy suave. En pocos pasos se puede  ir mejorando enormemente las habilidades. En pocas horas se pueden ver resultados, lo que aporta una motivación extra para continuar aprendiendo. 

Destacar, por último, que su comunidad de desarrolladores es bastante agradable y resolutiva: te resolverán los problemas que surjan para que puedas seguir avanzando en tus desarrollos.