Vue es el framework del momento y ha logrado tener un hueco entre los poderosos Angular y React que llevan más tiempo en el mercado, al ser un framework ligero, versátil y con una curva de aprendizaje menor si lo comparamos con la competencia; una de sus principales características es que es muy liviano y fácil de utilizar, además de ser progresivo, lo que significa que al implementar un proyecto entero, podemos decidir si toda la aplicación va a emplear Vue o solamente una parte de ella.

Caracteristicas principales de Vue

Vue es un framework cuyas funcionalidades están disponibles en otros frameworks como React o Angular:

• Tenemos directiva que manipula el modelo de datos y que luego se vinculan al DOM del documento; y gracias a la reactividad de Vue, a medida que cambian los datos reactivos, otras partes de un componente y otros componentes que hacen referencia a esos valores se actualizan automáticamente. Ésta es la magia de Vue o de este tipo de frameworks en general y es una de las razones por las que podemos crear un sistema completo y que puede parecer complejo con relativa facilidad; en otras palabras, Vue se encarga de observar los cambios que realizamos nosotros mediante formularios o eventos en general y replicar los cambios a lo largo de la aplicación y de esta forma nosotros no tenemo que implementar un comportamiento de este tipo.
• Tenemos el uso de los props, que permiten pasar datos entre componentes.
• Tenemos propiedades computadas, que se derivan de otras propiedades y son empleadas para realizar cálculos complejos u otro lógica del componente; además de que las propiedades computadas sonalmente se vuelven a evaluar cuando alguna de las dependencias que definen la propiedad computada ha cambiado.
• Tenemos observadores o watches que nos permiten observar cambios de datos reactivos. Los datos reactivos son datos que Vue.js observa y las acciones se realizan automáticamente cuando los datos reactivos cambian.
• También tenemos accesos a bibliotecas populares para extender el funcionamiento base del framework, Vue, a diferencia de otros frameworks, no cuenta con un sistema de ruteo por defecto, en su lugar, debemos de instalar una biblioteca llamada Vue Router, para manejar el enrutamiento; también tenemos bibliotecas para la gestión de estado como Pinia o Vuex.

Componentes en Vue

Los componentes son la pieza fundamental en Vue para construir aplicaciones, una aplicación de Vue consiste en múltiples componentes que los puedes ver cómo piezas de lego que en conjunto forman nuestra aplicación; los componentes son piezas de interfaz gráfica como listados, headers, formularios para crear, actualizar etc.

Vue.js es un framework progresivo para construir interfaces de usuario y es una diferencia fundamental de otros frameworks monolíticos, Vue está diseñado para ser utilizado incrementalmente lo que permite incluir Vue en una parte de la aplicación; estas piezas de código empleada se llaman componentes. Los componentes son bloques de código que se utilizan para definir los elementos de la interfaz de usuario; cada componente se compone de tres secciones o bloques: Script, Template y Style:

1. Script: Este bloque se utiliza para definir la lógica del componente mediante JavaScript; aquí también se declaran las propiedades, props, al igual que los métodos y los hooks y cualquier otra característica soportada por el framework.
2. Template: Este bloque se utiliza para definir el HTML, es decir, la estructura del componente, aquí también se emplea la sintaxis de plantilla que provee Vue.js para por ejemplo, imprimir variables o similares, condicionales o ciclos.
3. Style: En este bloque se utiliza para definir el estilo de la aplicación a los elementos HTML definidos en el apartado de template; este estilo se puede especificar para que sea global a la aplicación o solamente local al componente.

Guía para dar los primeros pasos con Vue 3

Curso y Libro para dominar Vue 3