Vue es un framework de Javascript para desarrollo front-end que tiene como concepto base la reactividad de nuestra página web frente a las interacciones con el usuario.

¿Qué quiere decir esto? La habilidad que tiene nuestra página o aplicación web de cambiar su vista y/o realizar acciones en respuesta a determinados eventos externos.
Por otra parte, Vue es un framework progresivo, es decir, el paquete base del framework no tiene incoporadas todas las herramientas que lleguemos a necesitar para construir nuestra aplicación web, pero podremos ir agregándolas a medida que las necesitemos, tanto del mismo framework como de otras librerías. De este modo, podemos empezar un proyecto chico con Vue, que, de complejizarse y transformarse en un sistema web más grande, iremos agregando las herramientas neceasarias para poder adapatarnos a los cambios en el proyecto.

Al crear una aplicación de Vue, estaremos creando una instancia de Vue raíz, a la cual le asignaremos diferentes componentes de Vue. De igual modo, Vue también permite incluir otro tipo de tecnologías en el front, así como no necesariamente dejar toda la lógica del lado del cliente.

Podemos definirla de la siguiente manera:

<div id="app">
<!-- nuestro código html -->
</div>

//version 2 de VueJS
var app = new Vue(
    {
        el: #app, 
        //(… otras opciones de Vue…)
    }
);

//versión 3 de VueJS
var App = {
    //(opciones de Vue)
};

Vue.createApp(App).mount(#app);

Ya tenemos definida nuestra app con Vue, pero ¿ y ahora ? Dentro de las instancias de Vue, al crearlo, pasamos un objeto que defina una serie de opciones que nos ayudarán a definir el comportamiento de nuestra vista. Entre estas opciones, contamos con el data: es en esta opción donde definiremos todos los valores que querramos para nuestra instancia de Vue que luego serán utilizados para nuestra vista.
Por ejemplo, supongamos que tenemos una página de venta de ropa y digamos que queremos reflejar en nuestra página Web los artículos más vendidos, podríamos definir nuestro data así:

//versión 2
var app = new Vue({
    el: "#app",
    data() {
        return {
            articulosMasVendidos: [ 'remera trasher', 'pantalón trasher', ‘medias 				 
            'arcoíris' ],
            carrito: 0
            };
    };
});

//versión 3
var app = {
    data() {
        return {
            articulosMasVendidos: ['remera trasher', 'pantalón trashe', 'medias 				 
            arcoíris' ],
            carrito: 0
        };
    };
};

Vue.createApp(app).mount("#app");

Ahora esos artículos serán parte de los datos que maneja nuestro instancia de Vue para luego ser visualizados en nuestra página web.

Otra opción base del objeto que le pasamos a esa nueva instancia de Vue es el de methods: con esta opción, definimos el comportamiento que tendrá nuestro componente en relación a la data que tengamos o en respuesta a eventos por fuera de la aplicación.

Continuando con el ejemplo de nuestra tienda de ropa, tendremos un botón de “agregar al carrito” o “eliminar del carrito”. En nuestra instancia, podríamos declararlo así: 

//versión 2
var app = new Vue({
	el: "#app",
	data: {
		return {
			articulos: [],
			articulosMasVendidos: ['remera trasher', 'pantalón trasher', 'medias arcoíris'],
			carrito: 0,
			};
		};
	methods: {
		agregarAlCarrito: function( articuloAgregado ) {
			articulos.push(articuloAgregado);
			carrito += 1;
		},
		eliminarDelCarrito: function(articuloDescartado) {
			articulos.pop(articuloDescartado);
			carrito -= 1;
		}
});

** En este caso, y en lo que es Vue, la palabra reservada this refiere al componente que declaramos, y no al contexto global donde es invocada la función agregarAlCarrito()** 

Componentes

Vue js es un sistema basado en componentes, es decir, a través de Vue, podemos definir código JS, HTML y CSS bajo un mismo ambiente: las relaciones y dependecias entre los tres estarán aislados y solo afectarán al código interno a cada componente.

Para poder usar componentes en Vue, simplemente llamamos a nuestra instancia de Vue raíz, nombrando a nuestro componente y definiéndole el html que queremos que abarque.
Continuando el ejemplo, supogamos que cada artículo en nuestra tienda esté diferenciado del resto, de modo de que su visualización y posibilidad de sumar al carrito estén aislados en cada 

componente en particular, y solo mantenemos el listado de artículos y el carrito en nuestra intancia raíz.

Supongamoso que nuestros artículos cuentan con una imagen o foto que los muestran, un precio e informar si hay o no en stock.

Para poder declararlo, contamos con la opción template, donde definimos el html sobre el cual actuará nuestro componente. 

<div id="app">
    <medias></medias>
</div>

//versión 2
Vue.component ('medias', { 
    data() {
        return: {
            nombre: “medias”,
            precio: ‘$150’,
            hayEnStock: true
        }
},
    template: `<div>
               <h1> {{ nombre }} </h2>
               <p> Valor en pesos: {{ precio }} </p>
               <div v-if=”hayEnStock”>Hay en stock <i class="fas fa-check"></i></div>
               <div v-else=”hayEnStock”>No hay en stock <i class="fa fa-times"></i></div>
               </div>`
	
});

//versión 3
//iniciada nuestra instancia raíz de Vue
Vue.createApp(app).mount(“#app”);

app.component(‘medias’, { 
	data() {
		return: {
			nombre: “medias”,
			precio: ‘$150’,
			hayEnStock: true
		},
		template:‘<div>
			<h1> {{ nombre }} </h2>
			<p> Valor en pesos: {{ precio }} </p>
			<div v-if=”hayEnStock”>Hay en stock <i class="fas fa-check"></i></div>
			<div v-else=”hayEnStock”>No hay en stock <i class="fa fa-times"></i></div>
			<!-- tag de fontawesome para ícono de tilde – >
		</div>’
}
});

** El código html relacionado con nuestro componente debe estar contenido dentro de un div **

Nuestro componente, al ser un objeto Vue, recibirá las mismas opciones que nuestra instancia raíz
(data, methods, properties, watchers, handlers, etc.) y un nombre que luego será su modo de llamarlo desde nuestro html (en el ejemplo <medias> para el nombre “medias”).

Así, podremos tener nuestra página organizada en forma de árbol, donde cada componente es una parte de otro más grande, y todos formando parte del ráiz.

Directivas e interpolación

Pero, ¿qué son ese 'v-if' y 'v-else'?

Se llaman directivas, están antecedidas de un v- y son instrucciones que le dicen a nuestro código html cómo actuar de acuerdo al estado y comportamiento de nuestras instancias de Vue.

Las que usamos en el ejemplo son las condicinales y le dicen a nuestro html cuando renderizarse de acuerdo a si se cumple o no una condición (valor booleano) en el estado de nuestro componente.
En este caso, si hay medias en stock, el texto “hay en Stock” junto con el ícono de check se mostrarán en nuestra página, mientras de si no hay medias en stock, se visualizará el texto “no hay en stock” junto al ícono de una cruz.

Entre las más usadas, encontramos:
v-bind: asocia data de nuestros componentes a atributos de nuestro código html,
v-show: representa la propiedad display de css, visibilizando el contenido dada una condición o evento,
v-on: asocia la reacción a eventos nuestro elementos del DOM a un comportamiento de nuestro componente,
v-for: recorre un array en nuestro data y accede a cada elemento de él desde nuestro html.
v-model: asociada a un tag de área de texto, input, select o radio, asocia la información ingresada desde estos tags al estado de nuestro componente.

¿Y ese "{{ nombre }}"?

Se llama interpolación y es la manera que tenemos de insertar expresiones de Javascript directamente sobre nuestro código html. En el ejemplo, el String “medias” de nuestro objeto de data es lo que se ve visualizado en nuestra página web. Pero no solo son strings los que podemos interpolar: cualquier expresión de Javascript es válida para la interpolación, como una expresión ternaria. En nuestro caso, podríamos mostrar un nombre si hay medias en stock:
"hayEnStock ? 'medias' : ' ' ".

Conclusión

VueJs es una gran herramienta aún en crecimiento que tiene mucho que ofrecer. Su sintaxis es muy intuitiva y fácil de aprender. Incluso con el básico conocimiento del framework, se pueden desarrollar aplicaciones útiles y poderosas, y de crecer podremos adaptarnos a ese crecimiento con mucha facilidad por sus librerías separadas del core que podremos incorporar a medida que las necesitemos.