Vue.js
Información general
Tipo de programa software libre
Autor Evan You
Lanzamiento inicial febrero de 2014
Licencia MIT License
Información técnica
Programado en
Versiones
Última versión estable 3.0.1 ( 15 de octubre de 2020​)
Última versión en pruebas 2.7.0-beta.828 de junio de 2022
Enlaces

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.

Descripción

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.

Historia

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.

Versiones

Versión Fecha de liberación Título
3.2 5 de agosto de 2021 Quintessential Quintuplets
3.1 7 de junio de 2021 Pluto
3.0 02020-09-18 18 de septiembre de 2020 One Piece
2.7 1 de julio de 2022 Naruto
2.6 02019-02-04 04 de febrero de 2019 Macross
2.5 02017-10-13 13 de octubre de 2017 Level E
2.4 02017-07-13 13 de julio de 2017 Kill la Kill
2.3 02017-04-27 27 de abril de 2017 JoJo's Bizarre Adventure
2.2 02017-02-26 26 de febrero de 2017 Initial D
2.1 02016-11-22 22 de noviembre de 2016 Hunter × Hunter
2.0 02016-09-30 30 de septiembre de 2016 Ghost in the Shell
1.0 02015-10-27 27 de octubre de 2015 Evangelion
0.12 02015-06-12 12 de junio de 2015 Dragon Ball
0.11 02014-11-07 07 de noviembre de 2014 Cowboy Bebop
0.10 02014-03-23 23 de marzo de 2014 Blade Runner
0.9 02014-02-25 25 de febrero de 2014 Animatrix
0.8 02014-01-27 27 de enero de 2014
0.7 02013-12-24 24 de diciembre de 2013
0.6 02013-12-08 08 de diciembre de 2013 VueJS

Características

Componentes

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: ,
  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>

Estilos de API

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

API de opciones

Con la API de opciones​, definimos la lógica de un componente utilizando un objeto de opciones como , , y . 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>

API de composición

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>

Templates

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.

Reactividad

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.

Transiciones

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.

Routing

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>

Ecosistema

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

Herramientas oficiales

  • 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)

Bibliotecas oficiales

  • 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

Véase también

Fuentes

  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.

Referencias

  1. «vue/LICENSE». GitHub. Consultado el 17 de abril de 2017. 
  2. «Vue.js Releases». GitHub. Consultado el 2020-15-10. 
  3. «Guide: What is Vue.js?». Vue.js. Consultado el 3 de enero de 2020. 
  4. «Meet the Team — Vue.js». vuejs.org (en inglés). Consultado el 23 de septiembre de 2019. 
  5. «Introduction — Vue.js». vuejs.org (en inglés). Consultado el 27 de mayo de 2020. 
  6. «Evan is creating Vue.js | Patreon». Patreon (en inglés). Consultado el 11 de marzo de 2017. 
  7. «What is Vue.js». www.w3schools.com. Consultado el 21 de enero de 2020. 
  8. «Between the Wires | Evan You». 3 de noviembre de 2016. Archivado desde el original el 3 de junio de 2017. Consultado el 26 de agosto de 2017. 
  9. «Release v3.2.0 Quintessential Quintuplets · vuejs/core». GitHub (en inglés). Consultado el 16 de diciembre de 2022. 
  10. «Release v3.1.0 Pluto · vuejs/core». GitHub (en inglés). Consultado el 16 de diciembre de 2022. 
  11. «v3.0.0 One Piece». GitHub. 18 de septiembre de 2020. Consultado el 23 de septiembre de 2020. 
  12. «Release v2.7.0 "Naruto" · vuejs/vue». GitHub (en inglés). Consultado el 16 de diciembre de 2022. 
  13. «v2.6.0 Macross». GitHub. 4 de febrero de 2019. Consultado el 23 de septiembre de 2020. 
  14. «v2.5.0 Level E». GitHub. 13 de octubre de 2017. Consultado el 23 de septiembre de 2020. 
  15. «v2.4.0 Kill la Kill». GitHub. 13 de julio de 2017. Consultado el 23 de septiembre de 2020. 
  16. «v2.3.0 JoJo's Bizarre Adventure». GitHub. 27 de abril de 2017. Consultado el 23 de septiembre de 2020. 
  17. «v2.2.0 Initial D». GitHub. 26 de febrero de 2017. Consultado el 23 de septiembre de 2020. 
  18. «v2.1.0 Hunter X Hunter». GitHub. 22 de noviembre de 2016. Consultado el 23 de septiembre de 2020. 
  19. «v2.0.0 Ghost in the Shell». GitHub. 30 de septiembre de 2016. Consultado el 23 de septiembre de 2020. 
  20. «1.0.0 Evangelion». GitHub. 27 de octubre de 2015. Consultado el 23 de septiembre de 2020. 
  21. «0.12.0: Dragon Ball». GitHub. 12 de junio de 2015. Consultado el 23 de septiembre de 2020. 
  22. «v0.11.0: Cowboy Bebop». GitHub. 7 de noviembre de 2014. Consultado el 23 de septiembre de 2020. 
  23. «v0.10.0: Blade Runner». GitHub. 23 de marzo de 2014. Consultado el 23 de septiembre de 2020. 
  24. «v0.9.0: Animatrix». GitHub. 25 de febrero de 2014. Consultado el 23 de septiembre de 2020. 
  25. «v0.8.0». GitHub. 27 de enero de 2014. Consultado el 23 de septiembre de 2020. 
  26. «v0.7.0». GitHub. 24 de diciembre de 2013. Consultado el 23 de septiembre de 2020. 
  27. «0.6.0: VueJS». GitHub. 8 de diciembre de 2013. Consultado el 23 de septiembre de 2020. 
  28. «Components — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 
  29. a b c «Introduction | Vue.js». vuejs.org. Consultado el 16 de diciembre de 2022. 
  30. «Template Syntax — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 
  31. «Vue 2.0 is Here!». The Vue Point. 30 de septiembre de 2016. Consultado el 11 de marzo de 2017. 
  32. «Reactivity in Depth — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 
  33. «Transition Effects — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 
  34. «Transitioning State — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 
  35. «Routing — Vue.js» (en inglés). Consultado el 11 de marzo de 2017. 

Enlaces externos