stringtranslate.com

Vue.js

Vue.js (comúnmente conocido como Vue ; pronunciado "view" [6] ) es un marco de trabajo de código abierto de JavaScript de interfaz de usuario modelo-vista-modelo de vista para crear interfaces de usuario y aplicaciones de una sola página . [12] Fue creado por Evan You y es mantenido por él y el resto de los miembros activos del equipo central. [13]

Descripción general

Vue.js presenta una arquitectura adaptable de manera incremental que se centra en la representación declarativa y la composición de componentes. La biblioteca principal se centra únicamente en la capa de vista. [6] Las funciones avanzadas necesarias para aplicaciones complejas, como el enrutamiento , la gestión de estados y las herramientas de compilación, se ofrecen a través de bibliotecas y paquetes de soporte mantenidos oficialmente. [14]

Vue.js permite ampliar HTML con atributos HTML llamados directivas. [15] Las directivas ofrecen funcionalidad a las aplicaciones HTML y vienen como directivas integradas o definidas por el usuario.

Historia

Vue fue creado por Evan You después de trabajar para Google utilizando AngularJS en varios proyectos. Más tarde resumió su proceso de pensamiento: "Pensé, ¿qué pasaría si pudiera extraer la parte que realmente me gustaba de Angular y construir algo realmente liviano?" [16] La primera confirmación del código fuente del proyecto estaba fechada en julio de 2013, momento en el que originalmente se denominó "Seed". [17] Vue se anunció públicamente por primera vez el siguiente febrero, en 2014. [18] [19]

Los nombres de las versiones a menudo se derivan del manga y el anime .

Versiones

Cuando se lanza una nueva versión mayor, por ejemplo v3.yz, la última versión menor, por ejemplo 2.xy, se convertirá en una versión LTS durante 18 meses (correcciones de errores y parches de seguridad) y durante los siguientes 18 meses estará en modo de mantenimiento (solo parches de seguridad). [42]

Características

Componentes

Los componentes de Vue amplían los elementos HTML básicos para encapsular código reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador de Vue adjunta un comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. [43] El fragmento de código a continuación contiene un ejemplo de un componente de Vue. El componente presenta un botón e imprime la cantidad de veces que se hace clic en el botón:

< plantilla >  < div  id = "tuto" >  < botón-clic  v-bind:initial-count = "0" ></ botón-clic >  </ div > </ plantilla >< script > Vue . component ( 'button-clicked' , { props : [ 'initialCount' ], data : () => ({ count : 0 , }), template : '<button v-on:click="onClick">Se hizo clic {{ count }} veces</button>' , calculate : { countTimesTwo () { return this . count * 2 ; } }, watch : { count ( newValue , oldValue ) { console . log ( `El valor de count se cambia de ${ oldValue } a ${ newValue } .` ); } }, methods : { onClick () { this . count += 1 ; } }, mount () { this . count = this . initialCount ; } });                                             nuevo Vue ({ el : '#tuto' , }); </ guión >

Plantillas

Vue utiliza una sintaxis de plantilla basada en HTML que permite vincular el DOM renderizado a los datos de la instancia de Vue subyacente. Todas las plantillas de Vue son HTML válido que puede ser analizado por navegadores compatibles con especificaciones y analizadores HTML . Vue compila las plantillas en funciones de renderizado de DOM virtuales . 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 puede calcular la cantidad mínima de componentes para volver a renderizar y aplicar la cantidad mínima de manipulaciones del DOM cuando cambia el estado de la aplicación. [44] Los usuarios de Vue pueden usar la sintaxis de plantilla o elegir escribir directamente funciones de renderizado usando hiperíndice ya sea a través de llamadas de función o JSX . [45] Las funciones de renderizado permiten que las aplicaciones se creen a partir de componentes de software . [46]

Reactividad

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

Transiciones

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

Cuando se inserta o elimina un elemento envuelto en un componente de transición, esto es lo que sucede:

  1. Vue detectará automáticamente si el elemento de destino tiene transiciones CSS o animaciones aplicadas. Si es así, se agregarán o eliminarán clases de transición CSS en los momentos adecuados.
  2. Si el componente de transición proporcionó ganchos de JavaScript, estos ganchos se llamarán en los momentos apropiados.
  3. Si no se detectan transiciones/animaciones CSS y no se proporcionan ganchos JavaScript, las operaciones DOM para inserción y/o eliminación se ejecutarán inmediatamente en el siguiente cuadro. [48] [49]

Enrutamiento

Una desventaja tradicional de las aplicaciones de una sola página (SPAs, por sus siglas en inglés) es la incapacidad de compartir enlaces a la "sub" página exacta dentro de una página web específica. Debido a que las SPAs ofrecen a sus usuarios una única respuesta basada en URL del servidor (normalmente ofrece index.html o index.vue), marcar determinadas pantallas o compartir enlaces a secciones específicas suele ser difícil, si no imposible. Para resolver este problema, muchos enrutadores del lado del cliente delimitan sus URL dinámicas con un " hashbang " (#!), por ejemplo, page.com/#!/ . Sin embargo, con HTML5, la mayoría de los navegadores modernos admiten el enrutamiento sin hashbangs.

Vue proporciona una interfaz para cambiar lo que se muestra en la página en función de la ruta URL actual, independientemente de cómo se haya modificado (ya sea mediante un enlace enviado por correo electrónico, una actualización o enlaces en la página). Además, el uso de un enrutador front-end permite la transición intencional de la ruta del navegador cuando se producen determinados eventos del navegador (es decir, clics) en botones o enlaces. Vue en sí no viene con enrutamiento hash 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 Atrás (historial de navegación) y restablecimientos de contraseñas por correo electrónico o enlaces de verificación por correo electrónico con parámetros de URL de autenticación. Admite la asignación de rutas anidadas a 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 crean componentes más grandes. Con vue-router agregado a la mezcla, los componentes simplemente deben asignarse a las rutas a las que pertenecen, y las rutas padre/raíz deben indicar dónde deben representarse las hijas. [50]

< div  id = "app" >  < vista-del-enrutador ></ vista-del-enrutador > </ div >...< script > ... const Usuario = { plantilla : '<div>Usuario {{ $route.params.id }}</div>' };     const router = new VueRouter ({ rutas : [ { ruta : '/usuario/:id' , componente : Usuario } ] }); ... </ script >

El código de arriba:

  1. Establece una ruta front-end en websitename.com/user/<id>.
  2. Que se representará en el componente Usuario definido en (const User...)
  3. Permite que el componente Usuario pase la identificación particular del usuario que se escribió en la URL usando la clave params del objeto $route: $route.params.id.
  4. Esta plantilla (que varía según los parámetros pasados ​​al enrutador) se representará <router-view></router-view>dentro del div#app del DOM.
  5. El HTML finalmente generado para alguien que escriba: websitename.com/user/1será:
< div  id = " app " >  <div> <div> Usuario 1 </div> </div> </div>​ ​​​​​​

[51]

Ecosistema

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

Herramientas oficiales

Bibliotecas oficiales

Véase también

Fuentes

 Este artículo incorpora texto de un trabajo de contenido libre . Licenciado bajo la Licencia MIT (declaración de licencia/permiso). Texto tomado de Vue.js Guide​, Vue.js.

Referencias

  1. ^ "Vue.js". vuejs.org .
  2. ^ "Primera semana de lanzamiento de Vue.js". Evan You . Archivado desde el original el 5 de febrero de 2019. Consultado el 11 de marzo de 2017 .
  3. ^ "core/changelogs/CHANGELOG-3.4.md en main · vuejs/core". GitHub .
  4. ^ "@vue/runtime-dom v3.2.45". Bundlephobia . Archivado desde el original el 29 de enero de 2023 . Consultado el 29 de enero de 2023 .
  5. ^ "vue/LICENSE". Vue.js . Consultado el 17 de abril de 2017 – a través de GitHub.
  6. ^ abc «Introducción». Vuejs.org . Archivado desde el original el 10 de febrero de 2022 . Consultado el 3 de enero de 2020 .
  7. ^ Macrae, Callum (2018). Vue.js: en funcionamiento: creación de aplicaciones web accesibles y de alto rendimiento. O'Reilly Media . ISBN 978-1-4919-9721-5Archivado desde el original el 30 de mayo de 2024 . Consultado el 9 de agosto de 2019 .
  8. ^ Nelson, Brett (2018). Conozca Vue.js: aprenda a crear aplicaciones de una sola página en Vue desde cero. Apress . ISBN 978-1-4842-3781-6Archivado desde el original el 30 de mayo de 2024 . Consultado el 9 de agosto de 2019 .
  9. ^ Yerburgh, Edd (2019). Prueba de aplicaciones Vue.js. Publicaciones Manning . ISBN 978-1-61729-524-9Archivado desde el original el 30 de mayo de 2024 . Consultado el 9 de agosto de 2019 .
  10. ^ Hombre libre, Adán (2018). Pro Vue.js 2. Presione . ISBN 978-1-4842-3805-9Archivado desde el original el 30 de mayo de 2024 . Consultado el 9 de agosto de 2019 .
  11. ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Trabajar con Vue.js. SitePoint . ISBN 978-1-4920-7144-0.[ enlace muerto permanente ]
  12. ^ [7] [8] [9] [10] [11] [6]
  13. ^ "Conoce al equipo". Vuejs.org . Archivado desde el original el 7 de febrero de 2022. Consultado el 23 de septiembre de 2019 .
  14. ^ "Evan está creando Vue.js". Patreon . Archivado desde el original el 3 de marzo de 2019. Consultado el 11 de marzo de 2017 .
  15. ^ "¿Qué es Vue.js?". W3Schools . Archivado desde el original el 22 de enero de 2020. Consultado el 21 de enero de 2020 .
  16. ^ "Evan You". Between the Wires . 3 de noviembre de 2016. Archivado desde el original el 3 de junio de 2017. Consultado el 26 de agosto de 2017 .
  17. ^ ab 贾, 志杰; 史, 广; 赵, 东 (2023).剑指大前端全栈工程师[ Aspirante a frontend: ingeniero de pila completa ] (en chino (China)). ISBN 9787302617594.
  18. ^ ab "Vue.js: JavaScript MVVM simplificado". Hacker News . 3 de febrero de 2014. Archivado desde el original el 29 de enero de 2023 . Consultado el 29 de enero de 2023 .
  19. ^ ab "Primera semana de lanzamiento de Vue.js". Evan You . 11 de febrero de 2014. Archivado desde el original el 12 de abril de 2017 . Consultado el 29 de enero de 2023 .
  20. ^ "Anuncio de Vue 3.5". Vue.js . 1 de septiembre de 2024. Archivado desde el original el 3 de septiembre de 2024 . Consultado el 25 de octubre de 2024 .
  21. ^ "Anuncio de Vue 3.4". Vue.js . 28 de diciembre de 2023. Archivado desde el original el 24 de marzo de 2024 . Consultado el 29 de marzo de 2024 .
  22. ^ "v3.3.0 Rurouni Kenshin". Vue.js. ​11 de mayo de 2023. Archivado desde el original el 13 de diciembre de 2023 . Consultado el 12 de mayo de 2023 a través de GitHub.
  23. ^ "v3.2.0 Quintessential Quintuplets". Vue.js . 5 de agosto de 2021. Archivado desde el original el 10 de agosto de 2021 . Consultado el 10 de agosto de 2021 – vía GitHub.
  24. ^ "v3.1.0 Pluto". Vue.js . 7 de junio de 2021. Archivado desde el original el 18 de julio de 2021 . Consultado el 18 de julio de 2021 – vía GitHub.
  25. ^ "v3.0.0 One Piece". Vue.js . 18 de septiembre de 2020. Archivado desde el original el 19 de septiembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  26. ^ "v2.7.0 Naruto". Vue.js . 1 de julio de 2022. Archivado desde el original el 1 de julio de 2022 . Consultado el 1 de julio de 2022 – vía GitHub.
  27. ^ "v2.6.0 Macross". Vue.js . 4 de febrero de 2019. Archivado desde el original el 11 de noviembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  28. ^ "v2.5.0 Nivel E". Vue.js . 13 de octubre de 2017. Archivado desde el original el 18 de septiembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  29. ^ "v2.4.0 Kill la Kill". Vue.js . 13 de julio de 2017. Archivado desde el original el 9 de noviembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  30. ^ "v2.3.0 JoJo's Bizarre Adventure". Vue.js . 27 de abril de 2017. Archivado desde el original el 11 de noviembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  31. ^ "v2.2.0 Initial D". Vue.js . 26 de febrero de 2017. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  32. ^ "v2.1.0 Hunter X Hunter". Vue.js . 22 de noviembre de 2016. Archivado desde el original el 8 de noviembre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  33. ^ "v2.0.0 Ghost in the Shell". Vue.js . 30 de septiembre de 2016. Archivado desde el original el 27 de octubre de 2020 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  34. ^ "1.0.0 Evangelion". Vue.js . 27 de octubre de 2015. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  35. ^ "0.12.0: Dragon Ball". Vue.js . 12 de junio de 2015. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  36. ^ "v0.11.0: Cowboy Bebop". Vue.js . 7 de noviembre de 2014. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  37. ^ "v0.10.0: Blade Runner". Vue.js . 23 de marzo de 2014. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  38. ^ "v0.9.0: Animatrix". Vue.js . 25 de febrero de 2014. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  39. ^ "v0.8.0". Vue.js . 27 de enero de 2014. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  40. ^ "v0.7.0". Vue.js . 24 de diciembre de 2013. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  41. ^ "0.6.0: VueJS". Vue.js . 8 de diciembre de 2013. Archivado desde el original el 13 de abril de 2021 . Consultado el 23 de septiembre de 2020 – vía GitHub.
  42. ^ "Vue Roadmap". Vue.js . 6 de noviembre de 2022. Archivado desde el original el 10 de diciembre de 2021 . Consultado el 10 de diciembre de 2021 – a través de GitHub.
  43. ^ "Componentes". Vuejs.org . Archivado desde el original el 10 de febrero de 2022 . Consultado el 11 de marzo de 2017 .
  44. ^ Jordan, John. "Plantilla de administración de Vue" . Consultado el 16 de julio de 2022 .
  45. ^ "Sintaxis de plantilla". Vuejs.org . Archivado desde el original el 10 de febrero de 2022. Consultado el 11 de marzo de 2017 .
  46. ^ "¡Ya está aquí Vue 2.0!". The Vue Point . 30 de septiembre de 2016. Archivado desde el original el 12 de marzo de 2017. Consultado el 11 de marzo de 2017 .
  47. ^ "Reactividad en profundidad". Vuejs.org . Archivado desde el original el 10 de febrero de 2022. Consultado el 11 de marzo de 2017 .
  48. ^ "Efectos de transición". Vuejs.org . Archivado desde el original el 13 de diciembre de 2023. Consultado el 11 de marzo de 2017 .
  49. ^ "Estado en transición". Vuejs.org . Archivado desde el original el 10 de febrero de 2022 . Consultado el 11 de marzo de 2017 .
  50. ^ "Enrutamiento". Vuejs.org . Archivado desde el original el 10 de febrero de 2022 . Consultado el 11 de marzo de 2017 .
  51. ^ Tú, Evan. "Vue Nested Routing (2)". Página de inicio de Vue (subpágina) . Archivado desde el original el 8 de mayo de 2017. Consultado el 10 de mayo de 2017 .
  52. ^ Lau Tiam, Kok. Desarrollo web práctico con Nuxt.js: cree aplicaciones Vue.js universales y generadas estáticamente con Nuxt.js. ISBN 9781789952698.

Enlaces externos