Vue JS Tutorial – ¿Qué es Vue JS?, Inicio rápido con Vue JS

“Vue.JS es un Framework JavaScript para crear asombrosas aplicaicone web modernas. Vue.JS es una librería para crear interfaces web. Vue.JS es una herramienta que aprovecha el uso de la arquitectura MVVM.”

Historia de Vue JS

Vue JS fue creado por Evan You, cuando se encontraba trabajando en uno de los proyectos de Google Creative Labs, necesitaban crear un prototipo rápido de una interfaz de usuario, en donde utilizaban mucho código repetitivo de HTML, en donde claramente se podía notar un consumo excesivo de tiempo y recursos.

Evan, comenzó a buscar una herramienta existente para este proposito, para su sorpresa no encontró lo que buscaba, no encontró ninguna librería, Framework (marco de trabajo) que encajara con lo que realmente necesitaban.

En ese entonces, Angular era ampliamente utilizado por muchas personas, React.JS estaba en sus comienzos, y Backbone.JS se estaba utilizando para aplicaciones a gran escala con arquitecturas MVC.

Para el tipo de proyecto que Evan necesita, ningunos de estos marcos complejos en ese momento era el que necesitaba.

Cuando te das cuenta que algo bueno no existe y eres capaz de crearlo, ¡hazlo!, y eso es lo que Evan hizo empezó a trabajar en crear su propio marco de trabajo. Empezó a trabajar en la creación de su propio Framework, que ayude en el prototipado rápido, al ofrecer una forma fácil y flexible con acceso a datos.

Luego puedes revisar el tutorial sobre Vue JS Directivas y Eventos.

Lo más importante sobre Vue JS

• Vue.js le permite vincular simplemente sus modelos de datos a la capa de representación.
• También permite reutilizar fácilmente los componentes en toda la aplicación.
• No necesita crear modelos o colecciones especiales ni registrar objetos de eventos.
• No necesita seguir alguna sintaxis especial. No necesitas instalar interminables dependencias.
• Sus modelos son objetos simples de JavaScript. Están obligados a mostrar lo que quieras en sus Vistas (texto, texto de entrada, clases, atributos, etc.), y simplemente funciona.
• Simplemente puede agregar el archivo vue.js a su proyecto y usarlo. Alternativamente, puedes usar vue-cli con la familia Webpack y Browserify, que no solo arranca todo proyecto, pero también es compatible con la recarga en caliente y proporciona herramientas de desarrollo.
• Puedes separar la capa de Vista de los estilos y la lógica de JavaScript o puedes ponerla todo junto en el mismo archivo Vue y construya la estructura y lógica de sus componentes en el mismo lugar. Hay soporte de complemento para todos los IDEs modernos y de uso común.
• Puede usar los preprocesadores que desee y puede usar ES2015. Puedes usarlo junto con su marco favorito en el que ha estado desarrollando, o puede usarlo por sí mismo.
• Puede usarlo solo para agregar una funcionalidad pequeña, o puede usar todo el ecosistema Vue para construir aplicaciones complejas.

Vue JS – Inicio Rápido.

Para hacer un ejemplo de inicio rápido con Vue.JS, vamos a empezar sin instalar nada en tu PC, para ello vamos a utilizar la herramienta JSFiddle (https://jsfiddle.net/).

Una vez que ingresemos a la herramienta, vamos a encontrar 4 cuadrantes, un primer cuadrante en donde vamos a escribir nuestro código HTML, un segundo cuadrante para el código JavaScript, un tercer cuadrante para el código CSS, y un último y cuarto cuadrante para ver el resultado que estamos obteniendo.

En nuestro código HTML, vamos a ingresar lo siguiente:

<div id="app">
 {{ 'Hola Mundo' }}
</div>

Podemos apreciar un div que tiene un identificador llamado “app”, como segundo paso nos vamos al cuadrante JavaScript, y vamos a indicarle que trabaje con Vue.JS, y para ello seleccionamos de la lista de Framework que acepta la herramienta, tal como se muestra en la siguiente imagen:

Ahora vamos a escribir el siguiente código en el cuadrante JavaScript:

new Vue({
   el:"#app"
});

En el código anterior, lo que hacemos es crear una instancia de Vue, al crear esta instancia debemos pasarle algunos parámetros a su constructor, en este caso le estamos pasando el parámetro “el”, que se refiere al objeto DOM de nuestra página, esto indica el alcance (scope) de Vue.JS, indicando que utilizará el objeto que tenga el identificador “app”, es decir nuestro div.

Una vez que ejecutamos el ejemplo haciendo click en el botón Run, o presionando Ctrl + Enter, veremos el resultado en el cuadrante de Resultados, y podemos apreciar que se muestra la información de ‘Hola Mundo’, claro sin las dobles llaves, y sin las comillas.

Entonces podemos apreciar el enlace desde la vista (HTML) con el código JavaScript, ahora hagamos el siguiente cambio, en donde vamos a notar mejor dicho enlace:

En el cuadrante HTML escribimos:

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

En el cuadrante JavaScript escribimos:

new Vue({
  el:"#app",
  data:{
    saludo: 'Hola Mundo'
  }
});

Realizado este cambio, veremos que tenemos el mismo resultado pero ahora haciendo uso de un dato desde la instancia de Vue, y lo reflejamos en la Vista.

Conclusiones

• Vue.JS, es uno de los Frameworks, con mayor crecimiento y demanda en la actualidad para el desarrollo FrontEnd, recomendamos mucho su uso y aplicación en tus proyectos.
• Si deseas comparar Vue.JS con tros Frameworks puedes ingresar a la siguiente dirección web: https://vuejs.org/v2/guide/comparison.html.
• También puedes revisar el tutorial sobre Vue JS Directivas y Eventos.

No olvides compartir el artículo en tus redes sociales.

Aprende a crear sitios web modernos utilizando el Framework de Vue JS, y mejorar tus conocimientos, el curso inlcuye: - Utilizar Vue JS desde cero, vas aprendiendo paso a paso. - Que son las Directivas en Vue JS y como utilizarlas. - Componentes, VUE CLI, BootStrap, Vue-router, SPA y mucho más. - Curso Práctico con acceso ilimitado a las actualizaciones. - Soporte permanente sobre alguna consulta. - Certificado de finalización.

Accede al curso de Vue JS