Generic Category (Spanish)300x250

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.

¿Qués es Vue.JS?, Un inicio rápido para conocer lo que podemos hacer con este poderoso Framework basado en JavaScript. Clic para tuitear

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.

JSfiddle-interfaz

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:

vuejs-javascript

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

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

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies