Vue.js tiene sus orígenes en 2013. El desarrollador de JavaScript de Google, Evan You, hizo las primeras aprobaciones de proyectos en julio de 2013y lanzó la primera versión oficial del marco en febrero de 2014.
Inspirado por las capacidades de AngularJS, otro marco de JavaScript que permitía el enlace de datos bidireccional y las interfaces dinámicas, Evan quería crear algo que ofreciera las capacidades de AngularJS en un formato más ligero. Para citar a Evan: “Pensé qué pasaría si pudiera extraer la parte que realmente me gustaba de Angular y construir algo realmente ligero”.
En esta publicación, explicaremos los conceptos básicos de Vue.js, incluido qué es, qué puede hacer con él y brindaremos ejemplos de sitios y aplicaciones que se ejecutan bajo este marco.
¿Qué es Vue.js?
Vue.js (o simplemente Vue) es un marco JavaScript ligero para crear interfaces de usuario reactivas. Vue amplía HTML y CSS estándar para crear un conjunto de herramientas poderosas para construir el front-end de aplicaciones web interactivas.
Al operar dentro del modelo MVVM (modelo-vista-modelo de vista), la biblioteca principal de Vue se enfoca en la capa del modelo de vista, lo que garantiza una sincronización reactiva entre el modelo y las capas de vista a través del enlace de datos bidireccional. Esto simplifica el desarrollo de aplicaciones web modernas basadas en el modelo de aplicación de página única (SPA).
El enlace de datos permite a Vue actualizar dinámicamente los elementos HTML que están “vinculados” a los objetos subyacentes de Vue. Esto permite a los desarrolladores crear aplicaciones web que se pueden ejecutar en el navegador del usuario y proporcionar un entorno interactivo que no requiere actualizar la página. Con la capacidad de actualizar HTML y CSS que se muestran en el navegador en respuesta a eventos en JavaScript básico, los desarrolladores pueden usar Vue para crear cualquier cosa, desde chats en vivo hasta videojuegos animados en un navegador web.
¿Qué puedes hacer con Vue.js?
Tradicionalmente, la creación de aplicaciones web interactivas ha significado crear soluciones alternativas inherentes a la naturaleza estática de las páginas web que se muestran en el navegador. Antes de la llegada de los marcos de JavaScript como AngularJS (y, en última instancia, Vue y otros marcos de trabajo como React), el proceso de actualización de la información en el navegador sin recargar la página requería un código JavaScript significativo.
Con Vue, el modelo de objeto de documento (DOM) está vinculado a la instancia de vista para formar un elemento de vista del modelo MVVM. Esto permite la creación de sitios web y SPA altamente interactivos que pueden realizar operaciones complejas sin tener que volver a cargar la página en el navegador.
Al combinar el DOM y la vista del modelo, se pueden representar y actualizar áreas específicas de una página web sin afectar la página completa. Esto permite la creación de elementos interactivos, ya sean funciones simples como chats en tiempo real que se actualizan con la llegada de nuevos mensajes, o casos de uso más complejos como GUI animadas avanzadas que se ejecutan completamente en el sitio web del navegador.
Al utilizar el enlace de datos bidireccional, Vue permite cambios automáticos en el código HTML presentado en la capa de vista del navegador sobre la marcha para reflejar los cambios en el modelo subyacente. Por ejemplo, una variable que cambia en el backend puede desencadenar automáticamente un cambio en la interfaz.
Integración incremental
Uno de los aspectos intrigantes de Vue es la capacidad de integrarse gradualmente con la aplicación. Dado que el objetivo original de Vue era ser lo más delgado y liviano posible, tiene sentido que no lo agobie con todo el valor de las funciones potencialmente innecesarias.
Puede elegir lo que necesita de Vue e integrarlo rápidamente en sus aplicaciones. En su forma más básica, Vue consiste en una sola biblioteca que se enfoca solo en la capa de visualización. Con el apoyo de la cornucopia de otras bibliotecas opcionales, Vue se puede adaptar como una biblioteca única o como un marco completo con diferentes capacidades según el caso de uso. Los desarrolladores tienen la opción de migrar o adaptar progresivamente nuevas bibliotecas de Vue según los requisitos de sus proyectos.
La integración incremental es uno de los principales factores que diferencian a Vue de otros marcos de JavaScript como AngularJS y React. De acuerdo con su filosofía original de ligereza, Vue se centra en minimizar el espacio ocupado y en ser fácil de configurar y ejecutar.
Cómo usar Vue.JS
Echemos un vistazo al código Vue muy simple para comprender cómo interactúa con HTML y transforma una página estática en una dinámica e interactiva.
<html><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="output">
</div>
<button onclick="button1()">Button 1</button>
<button onclick="button2()">Button 2</button>
<script>
var buttonObject = new Vue({
el: '#output',
data: {text: 'Click a button.'}
})
var buttonPresses1 = 0;
var buttonPresses2 = 0;
function button1() {
buttonPresses1++;
buttonObject.text = "You clicked button #1! You've clicked this button: " + buttonPresses1 + " times.";
}
function button2() {
buttonPresses2++;
buttonObject.text = "You clicked button #2! You've clicked this button: " + buttonPresses2 + " times.";
}
</script>
</body>
</html>
Vue tiene una sintaxis muy simple que resultará inmediatamente familiar para cualquiera que tenga experiencia con Javascript y HTML. En este ejemplo, crearemos una página simple que permita al usuario presionar uno de dos botones y cuente la cantidad de veces que se presionó cada botón.
Así es como funciona.
1. Defina HTML.
Primero, definimos el código HTML básico. Nosotros creamos división Con IDENTIFICACIÓN Con Salida. Esto le dice a Vue que cree un enlace de datos entre este div y el objeto Vue que definiremos más adelante. Vue usa llaves – – para encerrar datos de un enlace bidireccional, por lo que agregamos para crear un elemento div que se actualizará dinámicamente a medida que cambie el objeto subyacente.
2. Crea dos botones.
Luego creamos dos botones con la función de botón HTML. Especificamos que cuando se hace clic, deben llamar a las funciones de JavaScript llamadas botón 1 () y botón2 ().
3. Defina el objeto Vue.
Iniciando JavaScript en
4. Cree variables para realizar un seguimiento de los clics en los botones.
Definimos dos variables para rastrear el número de pulsaciones de botones, y el valor predeterminado es cero pulsaciones.
Se crean dos funciones: botón 1 () y botón (2). Cada uno de ellos incrementa la variable buttonPresses correspondiente en uno, y luego modifica el texto en el nuestro. Objeto de botón para que el usuario sepa qué botón presionó y cuántas veces lo presionó.
porque nos conectamos botón Objeto Texto abajo división en la parte superior del script, cada vez que se presiona el botón, la página cambia automáticamente el texto y muestra la cantidad de veces que se presiona el botón para el usuario.
La salida de la aplicación debería verse así:
Este simple ejemplo ilustra las capacidades básicas de Vue. Con el enlace de datos, podemos actualizar las secciones de la página en respuesta a la entrada del usuario y los cambios en el código JavaScript subyacente.
Ejemplos de aplicación de Vue.js
No faltan las aplicaciones web populares que confían en Vue para crear interfaces de usuario sólidas. Algunos de los ejemplos más populares son:
Amplía tus horizontes con Vue
Ahora que comprende qué es Vue y qué hace, está bien encaminado para crear SPA dinámicos y aplicaciones web interactivas. Impulsado por un extenso ecosistema de bibliotecas para funciones específicas, Vue brinda la capacidad de crear capas de vista dinámicas a través del enlace de datos bidireccional. Vue permite a los desarrolladores front-end una ruta rápida para crear todo, desde simples aplicaciones web interactivas hasta GUI complejas para aplicaciones web de todas las descripciones.
Dado que Vue se puede integrar gradualmente, es fácil tomar lo que le gusta de Vue y agregarlo a su próximo proyecto de JavaScript.
Ya sea que sea un desarrollador front-end experimentado que espera sumergirse en un marco liviano o un novato en front-end que espera comenzar en aguas poco profundas, Vue facilita su viaje y proporciona muchos atajos para comenzar.
