Vue.js
De Wikipedia, la enciclopedia libre
Saltar a navegación Saltar a búsqueda

Vue.js
Logotipo de Vue.js 2.svg
Autor (es) original (es)Evan You
Versión inicialFebrero de 2014 ; Hace 7 años [1] (2014-02)
Lanzamiento estable
3.2.20 [2] Edita esto en Wikidata / 8 de octubre de 2021 ; Hace 25 dias (8 October 2021)
Repositorio
Escrito enMecanografiado
Tamaño33,30 KB min + gzip
EscribeMarco de JavaScript
LicenciaLicencia MIT [3]
Sitio webvuejs .org Edita esto en Wikidata

Vue.js (comúnmente conocidos como Vue ; pronunciado / v j U / , como "vista" [4] ) es una de código abierto modelo-vista-viewmodel extremo delantero marco de JavaScript para la construcción de interfaces de usuario y las aplicaciones de una sola página . [11] Fue creado por Evan You, y es mantenido por él y el resto de los miembros activos del equipo central. [12]

Visión general

Vue.js presenta una arquitectura incrementalmente adaptable que se enfoca en la representación declarativa y la composición de componentes. La biblioteca principal se centra solo en la capa de vista. [13] Las funciones avanzadas requeridas para aplicaciones complejas como enrutamiento , administración de estado y herramientas de compilación se ofrecen a través de bibliotecas y paquetes de soporte mantenidos oficialmente. [14]

Vue.js permite extender 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 usando AngularJS en varios proyectos. Más tarde resumió su proceso de pensamiento: "Pensé, ¿qué pasaría si pudiera extraer la parte que realmente me gustó de Angular y construir algo realmente liviano"? [16] El primer compromiso de código fuente con el proyecto data de julio de 2013, y Vue se lanzó por primera vez en febrero de 2014.

Los nombres de las versiones a menudo se derivan del manga y el anime , la mayoría de los cuales pertenecen al género de ciencia ficción .

Versiones

VersiónFecha de lanzamientoTítulo
3.25 de agosto de 2021Quintillizos por excelencia [17]
3.17 de junio de 2021Plutón [18]
3,018 de septiembre de 2020Una pieza [19]
2.64 de febrero de 2019Macross [20]
2.513 de octubre de 2017Nivel E [21]
2.413 de julio de 2017Kill la Kill [22]
2.327 de abril de 2017La extraña aventura de JoJo [23]
2.226 de febrero de 2017Inicial D [24]
2.122 de noviembre de 2016Hunter X Hunter [25]
2.030 de septiembre de 2016Fantasma en el caparazón [26]
1.027 de octubre de 2015Evangelion [27]
0,1212 de junio de 2015Bola de Dragón [28]
0,117 de noviembre de 2014Cowboy Bebop [29]
0,1023 de marzo de 2014Blade Runner [30]
0,925 de febrero de 2014Animatriz [31]
0,827 de enero de 2014N / A [32]
0,724 de diciembre de 2013N / A [33]
0,68 de diciembre de 2013VueJS [34]

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 comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. [35] El siguiente fragmento de código contiene un ejemplo de un componente de 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" >  < v-bind al hacer clic con el botón  : initial-count = "0" > </ button-clicked >  </ div > </ template >< guión > Vue . componente ( 'button-clicked' ,  {  props :  [ 'initialCount' ],  data :  ()  =>  ({  count :  0 ,  }),  template :  '<button v-on: click = "onClick"> Clicked {{ count}} veces </button> ' ,  calculado :  {  countTimesTwo ()  {  return  this . count  *  2 ;  }  },  watch :  {  count (newValue ,  oldValue )  {  consola . log ( `El valor de recuento se cambia de $ { oldValue } a $ { nuevoValor } .` );  }  },  métodos :  {  onClick ()  {  this . contar  + =  1 ;  }  },  montado ()  {  esto . cuenta  =  esto . initialCount ;  } });new  Vue ({  el :  '#tuto' , }); </ script >

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álidas que pueden ser analizadas por navegadores y analizadores HTML que cumplen con las especificaciones . Vue compila las plantillas en funciones de renderización DOM virtual . Un modelo de objeto de documento virtual (o "DOM") permite a Vue representar 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 DOM cuando cambia el estado de la aplicación.

Los usuarios de Vue pueden usar la sintaxis de la plantilla o elegir escribir directamente funciones de renderizado usando hiperescripto, ya sea a través de llamadas a funciones o JSX . [36] Las funciones de renderizado permiten crear aplicaciones a partir de componentes de software . [37]

Reactividad

Vue presenta un sistema de reactividad que usa objetos simples de JavaScript y una reproducción optimizada. Cada componente realiza un seguimiento de sus dependencias reactivas durante su renderizado, por lo que el sistema sabe exactamente cuándo volver a renderizar y qué componentes volver a renderizar. [38]

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 clases automáticamente para animaciones y transiciones CSS
  • Integre bibliotecas de animación CSS de terceros, como Animate.css
  • Use JavaScript para manipular directamente el DOM durante los ganchos de transición
  • Integre bibliotecas de animación JavaScript de terceros, como Velocity.js

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 lo hace, las clases de transición CSS se agregarán / eliminarán en los tiempos apropiados.
  2. Si el componente de transición proporciona enlaces JavaScript, estos enlaces se llamarán en los tiempos adecuados.
  3. Si no se detectan transiciones / animaciones CSS y no se proporcionan ganchos de JavaScript, las operaciones DOM para la inserción y / o eliminación se ejecutarán inmediatamente en el siguiente fotograma. [39] [40]

Enrutamiento

Una desventaja tradicional de las aplicaciones de una sola página (SPA) es la imposibilidad de compartir enlaces a la "sub" página exacta dentro de una página web específica. Debido a que los SPA brindan a sus usuarios solo una respuesta basada en URL desde el servidor (generalmente 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á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 modificó (ya sea mediante un enlace enviado por correo electrónico, 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 ciertos eventos del navegador (es decir, clics) en botones o enlaces. Vue en sí no viene con enrutamiento hash de 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 restablece la contraseña de correo electrónico o los enlaces de verificación de correo electrónico con parámetros de autenticación de URL. Admite la asignación de rutas anidadas a componentes anidados y ofrece un control de transición detallado. 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 agregado a la mezcla, los componentes simplemente deben asignarse a las rutas a las que pertenecen, y las rutas principales / raíz deben indicar dónde deben representar los elementos secundarios.[41]

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

El código de arriba:

  1. Establece una ruta de entrada en websitename.com/user/<id>.
  2. Que se renderizará en el componente Usuario definido en (const User ...)
  3. Permite que el componente usuario para pasar el id de usuario particular del que se escribe en la URL utilizando la clave params la ruta del objeto $: $route.params.id.
  4. Esta plantilla (que varía según los parámetros pasados ​​al enrutador) se procesará <router-view></router-view>dentro de la aplicación div # 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 >

[42]

Ecosistema

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

Utillaje oficial

  • Devtools : extensión del navegador devtools para depurar aplicaciones Vue.js
  • Vue CLI : herramientas estándar para un desarrollo rápido de Vue.js
  • Vue Loader : un cargador de paquetes web que permite la escritura de componentes de Vue en un formato llamado Componentes de un solo archivo (SFC)

Bibliotecas oficiales

  • Vue Router : el enrutador oficial para Vue.js
  • Vuex : gestión de estado centralizada inspirada en Flux para Vue.js
  • Vue Server Renderer : representación del lado del servidor para Vue.js

Ver también

  • Comparación de marcos de JavaScript
  • Reaccionar
  • AngularJS
  • Angular
  • Marco de Quasar
  • Marco de JavaScript
  • Biblioteca de JavaScript
  • Model – view – ViewModel
  • Nuxt.js

Fuentes

 Este artículo incorpora texto de un trabajo de contenido gratuito . Con licencia de MIT License Declaración de licencia / permiso en Wikimedia Commons . Texto tomado de Vue.js Guide , Vue.js. Para aprender cómo agregar texto de licencia abierta a los artículos de Wikipedia, consulte esta página de instrucciones . Para obtener información sobre cómo reutilizar texto de Wikipedia , consulte los términos de uso .

Referencias

  1. ^ "Primera semana de lanzamiento de Vue.js" . Evan You .
  2. ^ https://github.com/vuejs/vue-next/releases/tag/v3.2.20 .
  3. ^ "vue / LICENCIA" . GitHub . Consultado el 17 de abril de 2017 .
  4. ^ "Guía: ¿Qué es Vue.js?" . Vue.js . Consultado el 3 de enero de 2020 .
  5. ^ Macrae, Callum (2018). Vue.js: en funcionamiento: creación de aplicaciones web accesibles y eficaces . O'Reilly Media . ISBN 9781491997215.
  6. ^ Nelson, Brett (2018). Introducción a Vue.js: aprenda a crear aplicaciones de una sola página en Vue desde cero . Presione . ISBN 9781484237816.
  7. ^ Yerburgh, Edd (2019). Las solicitudes de pruebas Vue.js . Publicaciones Manning . ISBN 9781617295249.
  8. ^ Freeman, Adam (2018). Pro Vue.js 2 . Presione . ISBN 9781484238059.
  9. ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A .; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Trabajar con Vue.js . SitePoint . ISBN 9781492071440.
  10. ^ "Introducción - Vue.js" . Consultado el 11 de marzo de 2017 .
  11. ^ [5] [6] [7] [8] [9] [10]
  12. ^ "Conozca al equipo - Vue.js" . vuejs.org . Consultado el 23 de septiembre de 2019 .
  13. ^ "Introducción - Vue.js" . vuejs.org . Consultado el 27 de mayo de 2020 .
  14. ^ "Evan está creando Vue.js | Patreon" . Patreon . Consultado el 11 de marzo de 2017 .
  15. ^ "Qué es Vue.js" . www.w3schools.com . Consultado el 21 de enero de 2020 .
  16. ^ "Entre los cables | Evan You" . Entre los alambres . 3 de noviembre de 2016. Archivado desde el original el 3 de junio de 2017 . Consultado el 26 de agosto de 2017 .
  17. ^ "v3.2.0 Quintillizos por excelencia" . GitHub. 5 de agosto de 2021 . Consultado el 10 de agosto de 2021 .
  18. ^ "v3.1.0 Plutón" . GitHub. 7 de junio de 2021 . Consultado el 18 de julio de 2021 .
  19. ^ "v3.0.0 One Piece" . GitHub. 18 de septiembre de 2020 . Consultado el 23 de septiembre de 2020 .
  20. ^ "v2.6.0 Macross" . GitHub. 4 de febrero de 2019 . Consultado el 23 de septiembre de 2020 .
  21. ^ "v2.5.0 Nivel E" . GitHub. 13 de octubre de 2017 . Consultado el 23 de septiembre de 2020 .
  22. ^ "v2.4.0 Kill la Kill" . GitHub. 13 de julio de 2017 . Consultado el 23 de septiembre de 2020 .
  23. ^ "v2.3.0 JoJo's Bizarre Adventure" . GitHub. 27 de abril de 2017 . Consultado el 23 de septiembre de 2020 .
  24. ^ "v2.2.0 inicial D" . GitHub. 26 de febrero de 2017 . Consultado el 23 de septiembre de 2020 .
  25. ^ "v2.1.0 Hunter X Hunter" . GitHub. 22 de noviembre de 2016 . Consultado el 23 de septiembre de 2020 .
  26. ^ "v2.0.0 Ghost in the Shell" . GitHub. 30 de septiembre de 2016 . Consultado el 23 de septiembre de 2020 .
  27. ^ "1.0.0 Evangelion" . GitHub. 27 de octubre de 2015 . Consultado el 23 de septiembre de 2020 .
  28. ^ "0.12.0: Dragon Ball" . GitHub. 12 de junio de 2015 . Consultado el 23 de septiembre de 2020 .
  29. ^ "v0.11.0: Cowboy Bebop" . GitHub. 7 de noviembre de 2014 . Consultado el 23 de septiembre de 2020 .
  30. ^ "v0.10.0: Blade Runner" . GitHub. 23 de marzo de 2014 . Consultado el 23 de septiembre de 2020 .
  31. ^ "v0.9.0: Animatrix" . GitHub. 25 de febrero de 2014 . Consultado el 23 de septiembre de 2020 .
  32. ^ "v0.8.0" . GitHub. 27 de enero de 2014 . Consultado el 23 de septiembre de 2020 .
  33. ^ "v0.7.0" . GitHub. 24 de diciembre de 2013 . Consultado el 23 de septiembre de 2020 .
  34. ^ "0.6.0: VueJS" . GitHub. 8 de diciembre de 2013 . Consultado el 23 de septiembre de 2020 .
  35. ^ "Componentes - Vue.js" . Consultado el 11 de marzo de 2017 .
  36. ^ "Sintaxis de la plantilla - Vue.js" . Consultado el 11 de marzo de 2017 .
  37. ^ "¡Vue 2.0 ya está aquí!" . El Vue Point . 30 de septiembre de 2016 . Consultado el 11 de marzo de 2017 .
  38. ^ "Reactividad en profundidad - Vue.js" . Consultado el 11 de marzo de 2017 .
  39. ^ "Efectos de transición - Vue.js" . Consultado el 11 de marzo de 2017 .
  40. ^ "Estado de transición - Vue.js" . Consultado el 11 de marzo de 2017 .
  41. ^ "Enrutamiento - Vue.js" . Consultado el 11 de marzo de 2017 .
  42. ^ Tú, Evan. "Enrutamiento anidado de Vue (2)" . Página de inicio de Vue (subpágina) . Consultado el 10 de mayo de 2017 .

enlaces externos

  • Página web oficial
Obtenido de " https://en.wikipedia.org/w/index.php?title=Vue.js&oldid=1051741756 "
Contribute a better translation