Empezar con Vue JS

Imagina poder usar condicionales y bucles en HTML. ¿¡Parece loco no!?. Si no conoces Vue te parecerá casi imposible. Este framework puede hacer eso y más. Relájate porque vas a aprender acerca de este framework.

Vue es un framework progresivo enfocado en el desarrollo de interfaces de usuario. Diseñado para manipular únicamente la capa de la vista, lo que lo hace mas fácil de integrar con otras librerías. Y a diferencia de React o Angular es mantenido por la comunidad de Vue.

Para empezar a usar Vue primero necesitamos importar la librería. Dentro de la etiqueta "head" vamos a añadir:

  <!-- versión de desarrollo, con ayudas y errores en consola-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

O:

  <!-- versión de producción, optimizado en tamaño y velocidad -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

Recomiendo que para empezar y hacer pruebas usen la versión de desarrollo.

Ya importamos la librería. ¿¡Ahora Que!?. Bueno ahora tenemos que crear una instancia de Vue. Abajo antes del cierre de la etiqueta "body" vamos a añadir una etiqueta "script" con lo siguiente:

 var App = new Vue({
  el:"#app",
  data:{
   mensaje: "Hola Mundo con Vue!!!"
  }
 });

Ahora que eso de "el:"#app"". Esa es la etiqueta "root". Osea es la raíz del framework. Y fuera de ella el framework no trabaja. Ahora vamos a añadir esta etiqueta:

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

La etiqueta "root" siempre tiene que estar arriba de la instancia.

Ahora vamos a ver algo interesante. En la consola para desarrolladores del navegador escriban.

  App.mensaje

Es el mismo texto que se muestra en pantalla. Ahora vamos intentar cambiarlo.

  App.mensaje = "Mensaje Cambiado desde la Consola";

Aqui apreciamos una de los "superpoderes" de Vue. La Reactividad. ¿¡Pero Que es Esto!?. Es un flujo de datos bidireccional. Donde los datos son cambiados o asignados desde dentro de la instancia como fuera de ella.

Para entender mejor esto, lean Reactividad en Profundidad.

Ahora vamos a ver algo mas interesante. Vamos a cambiar la "data" de la instancia.

  data:{
    ver:true
  }

Y cambiemos el HTML.

  <div id="app">
    <div v-if="ver">Me ves</div>
    <div v-else>Ahora no</div>
    <button v-if="ver" @click="ver = false">No Ver</button>
    <button v-else @click="ver = true">Ver</button>
  </div>

Si como ves. ¡Condicionales!. Vamos a Explicar. La directiva "v-if" y "v-else" funcionan exactamente igual que los condicionales en JavaScript. Pero estos funcionan con los datos previamente asignados en la instancia de Vue.

Pero en el ejemplo vemos algo distinto. El "@click" es la forma de decirle a la librería que ese evento lo ejecuta Vue. Pero hablaremos de los eventos y métodos en otro post.

Estos condicionales son muy útiles a la hora de desarrollar una Interfaz de Usuario. Y facilitan tantas vueltas de código.

¿¡Y que paso con los bucles!?

Bueno vamos a cambiar el ejemplo. Cambien el HTML y pongan:

  <div id="app">
    <div v-for="usuario in listaUsuarios">
      <div>{{usuario}}</div>
    </div>
  </div>

Y cambiamos los datos:

  data: {
    listaUsuarios:["Juan", "Ana", "Pedro", "Esteban", "Cucho"]
  }

¡Nada mas sencillo que eso!

Ademas podemos recorrer un Array de Objetos y obtener los datos con la misma sintaxis de JavaScript: "item.subItem".

Vue es un framework que si aprendes y lo dominas podrás crear grandes cosas. Para profundizar más consulta la Documentación Oficial en Español de Vue.

La mejor forma de aprender es experimentando. Explora todas las funciones que tiene Vue. Crea con él. Hasta de las cosas pequeñas puedes tener grandes aprendizajes. Explora Vue y lograras grandes cosas.