Vue.js

Vue.js (comúnmente conocido como Vue; se pronuncia /vjuː/, como "view"​) es un framework de JavaScript de código abierto para la construcción de interfaces de usuario y aplicaciones de una sola página. Fue creado por Evan You, y es mantenido por él y por el resto de los miembros activos del equipo central que provienen de diversas empresas como Netlify y Netguru.​

Vue.js cuenta con una arquitectura de adaptación gradual que se centra en la representación declarativa y la composición de componentes. La biblioteca central se centra sólo en la capa de vista.​ Las características avanzadas necesarias para aplicaciones complejas como el enrutamiento, la gestión de estados y las herramientas de construcción se ofrecen a través de librerías y paquetes de apoyo mantenidos oficialmente​ con Next.js como una de las soluciones más populares.

Vue.js permite extender el HTML con atributos HTML llamados directivas.​ Las directivas ofrecen funcionalidad a las aplicaciones HTML y vienen como directivas incorporadas o definidas por el usuario.

Vue fue creado por Evan You después de trabajar para Google usando AngularJS en varios proyectos. Más tarde, resumió su proceso de pensamiento: "Pensé, ¿qué tal si pudiera extraer la parte que realmente me gustaba de Angular y construir algo realmente liviano?".​ El primer código fuente comprometido con el proyecto fue fechado en julio de 2013 y Vue fue liberado por primera vez en febrero siguiente, en 2014.

Los componentes Vue extienden los elementos básicos de HTML para encapsular el código reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador de Vue adjunta comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas.​ El siguiente fragmento de código contiene un ejemplo de un componente Vue. El componente presenta un botón e imprime el número de veces que se hace clic en el botón:

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Los componentes de Vue se pueden crear en dos estilos de API​ diferentes: API de opciones y API de composición.

Con la API de opciones,​ definimos la lógica de un componente utilizando un objeto de opciones. Las propiedades definidas por las opciones se exponen en las funciones internas, que apuntan a la instancia del componente:data methods mounted this

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  },

  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

Con Composition API,​ definimos la lógica de un componente utilizando funciones de API importadas. En los SFC, la API de composición se usa normalmente con <script setup>. El atributo es una sugerencia que hace que Vue realice transformaciones en tiempo de compilación que nos permitan usar Composition API con menos repeticiones. Por ejemplo, las importaciones y las variables/funciones de nivel superior declaradas se pueden utilizar directamente en el template.setup <script setup>

Aquí está el mismo componente, con exactamente la misma plantilla, pero usando la API de composición y en su lugar:<script setup>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

Vue utiliza una sintaxis de plantilla basada en HTML que permite vincular el DOM renderizado a los datos de la instancia subyacente de Vue. Todas las plantillas de Vue son HTML válido que puede ser analizado por navegadores que cumplan con las especificaciones y por analizadores HTML. Vue compila las plantillas en funciones de representación de DOM virtual. Un Modelo de Objeto de Documento virtual (o "DOM") permite a Vue renderizar componentes en su memoria antes de actualizar el navegador. Combinado con el sistema de reactividad, Vue es capaz de calcular el número mínimo de componentes a ser renderizados y aplicar la cantidad mínima de manipulaciones DOM cuando el estado de la aplicación cambia.

Los usuarios de Vue pueden usar la sintaxis de la plantilla o elegir escribir directamente las funciones de representación usando JSX.​ Las funciones de representación permiten que la aplicación se construya a partir de componentes de software.​

Vue cuenta con un sistema de reactividad que utiliza objetos de JavaScript simples y una retransmisión optimizada. Cada componente mantiene un registro de sus dependencias reactivas durante su renderización, de modo que el sistema sabe con precisión cuándo volver a renderizar y qué componentes volver a renderizar.​

Vue proporciona una variedad de formas de aplicar efectos de transición cuando se insertan, actualizan o eliminan elementos del DOM. Esto incluye herramientas para:

• Aplicar automáticamente clases para transiciones y animaciones CSS
• Integrar bibliotecas de animación CSS de terceros, como Animate.css
• Usar JavaScript para manipular directamente el DOM durante los hooks de transición
• Integrar bibliotecas de animación JavaScript de terceros, como Velocity.js

Cuando un elemento envuelto en un componente de transición es insertado o removido, esto es lo que sucede:

1. Vue analizará automáticamente si el elemento objetivo tiene transiciones o animaciones CSS aplicadas. Si es así, las clases de transición CSS se añadirán/eliminarán en los momentos apropiados
2. Si el componente de transición proporcionó ganchos de JavaScript, estos ganchos serán llamados en el momento apropiado.
3. Si no se detectan transiciones/animaciones CSS y no se proporcionan ganchos de JavaScript, las operaciones DOM de inserción y/o extracción se ejecutarán inmediatamente en el siguiente cuadro​​

Una desventaja tradicional de las aplicaciones de una sola página (SPA) es la imposibilidad de compartir enlaces a la "subpágina" exacta dentro de una página web específica. Dado que las SPA sirven a sus usuarios sólo una respuesta basada en la dirección URL del servidor (normalmente sirve index.html o index.vue), marcar ciertas pantallas o compartir enlaces a secciones específicas es normalmente difícil, si no imposible. Para resolver este problema, muchos enrutadores del lado del cliente delimitan sus URL dinámicos con un "hashbang" (#!), por ejemplo, page.com/#!/. Sin embargo, con HTML5 la mayoría de los navegadores modernos soportan el enrutamiento sin hashbangs.

Vue proporciona una interfaz para cambiar lo que se muestra en la página en base a la ruta URL actual, independientemente de cómo se haya cambiado (ya sea mediante un enlace enviado por correo electrónico, actualización o enlaces dentro de la página). Además, el uso de un router frontal permite la transición intencional de la ruta del navegador cuando ciertos eventos del navegador (es decir, clics) se producen en los botones o enlaces. El valor en sí mismo no viene con el enrutamiento precipitado del front-end. Pero el paquete de código abierto "vue-router" proporciona una API para actualizar la URL de la aplicación, admite el botón de regreso (historial de navegación) y restablece la contraseña del correo electrónico o los enlaces de verificación de correo electrónico con parámetros de URL de autenticación. Admite el mapeo de rutas anidadas a los componentes anidados y ofrece un control de transición de grano fino. Con Vue, los desarrolladores ya están componiendo aplicaciones con pequeños bloques de construcción que construyen componentes más grandes. Con Vue-router añadido a la mezcla, los componentes deben ser simplemente mapeados a las rutas a las que pertenecen y las rutas padre/raíz deben indicar dónde deben renderizar los hijos.​

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>

El código anterior:

1. Establece una ruta de entrada en websitename.com/user/<id>
2. Lo que hará que el componente de Usuario definido en (Const. Usuario...)
3. Permite que el componente Usuario pase el id particular del usuario que fue tecleado en la URL usando la tecla $route object's params: $route.params.id
4. Esta plantilla (que varía según los parámetros pasados al router) se renderizará en <router-view></router-view> dentro del div#app del DOM
5. El HTML finalmente generado para alguien que escriba: websitename.com/user/1 será:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

La biblioteca central viene con herramientas y bibliotecas desarrolladas por el equipo central y los colaboradores.

• Devtools - Extensión del navegador devtools para depurar aplicaciones Vue.js
• Vue CLI - Herramienta estándar para el rápido desarrollo de aplicaciones Vue.js
• Vue Loader - un loader de webpack que permite la escritura de componentes Vue en un formato llamado Single-File Components (SFC)

• Vue Router - El oficial router para Vue.js
• Vuex – El gestor de estados centralizados para Vue.js
• Vue Servidor Renderer - Renderización del lado del servidor para Vue.js
• Pinia – Nuevo gestor simple de estados para Vue.js

• Comparación de frameworks de Javascript
• React
• AngularJS
• Angular
• Quasar
• Javascript framework
• Biblioteca de Javascript
• Modelo–vista–modelo de vista
• Nuxt.js

  Este artículo incorpora texto de un trabajo de contenido libre. Licenciado bajo Licencia MIT Declaración de la licencia: Vue.js Guide, Vue.js, Para aprender como añadir texto de licencias libres a artículos de Wikipedia, véase Wikipedia:Agregar textos en licencia libre en Wikipedia. Para más información sobre cómo reutilizar texto de Wikipedia, véanse las condiciones de uso.

• y https://github.com/vuejs/core/tree/main/packages/vue#readme Página web oficial (en inglés)