Vue.js
Vue.js (comúnmente conocido como Vue; se pronuncia /vjuː/, como "view"[3]) 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.[4] DescripciónVue.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.[5] 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[6] con Next.js como una de las soluciones más populares. Vue.js permite extender el HTML con atributos HTML llamados directivas.[7] Las directivas ofrecen funcionalidad a las aplicaciones HTML y vienen como directivas incorporadas o definidas por el usuario. HistoriaVue 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?".[8] 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
CaracterísticasComponentesLos 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.[31] 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>
Estilos de APILos componentes de Vue se pueden crear en dos estilos de API[32] diferentes: API de opciones y API de composición. API de opcionesCon la API de opciones,[32] 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: <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ónCon Composition API,[32] definimos la lógica de un componente utilizando funciones de API importadas. En los SFC, la API de composición se usa normalmente con Aquí está el mismo componente, con exactamente la misma plantilla, pero usando la API de composición y en su lugar: <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>
TemplatesVue 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.[33] Las funciones de representación permiten que la aplicación se construya a partir de componentes de software.[34] ReactividadVue 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.[35] TransicionesVue proporciona una variedad de formas de aplicar efectos de transición cuando se insertan, actualizan o eliminan elementos del DOM. Esto incluye herramientas para:
Cuando un elemento envuelto en un componente de transición es insertado o removido, esto es lo que sucede:
RoutingUna 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.[38] <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:
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
EcosistemaLa biblioteca central viene con herramientas y bibliotecas desarrolladas por el equipo central y los colaboradores. Herramientas oficiales
Bibliotecas oficiales
Véase también
Fuentes
Referencias
Enlaces externos |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Portal di Ensiklopedia Dunia
