Diferencia entre revisiones de «Vue.js»

1249 bytes añadidos ,  hace 6 meses
m
 
=== Componentes ===
Los componentes Vue extienden los [[Elemento HTML|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 del Vue adjunta comportamiento. En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas.<ref>{{Cita web|url=https://vuejs.org/v2/guide/components.html|título=Components — Vue.js|fechaacceso=March 11, 2017|idioma=en}}</ref> 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:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
 
=== Templates ===
Una desventaja tradicional de las [[Single-page application|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.<ref>{{Cita web|url=https://vuejs.org/v2/guide/routing.html|título=Routing — Vue.js|fechaacceso=March 11, 2017|idioma=en}}</ref><syntaxhighlight lang="html">
<div id="app">
<router-view></router-view>
</div>
...
 
<script>
...
const User = {
template: '<div>User {{ $route.params.id }}</div>'
};
 
const router = new VueRouter({
El código anterior:
routes: [
{ path: '/user/:id', component: User }
]
});
...
</script>
</syntaxhighlight>El código anterior:
 
# Establece una ruta de entrada en <code>websitename.com/user/<id></code>.
# Esta plantilla (que varía según los parámetros pasados al router) se renderizará en <code><router-view></router-view></code> dentro del div#app del DOM.
# El HTML finalmente generado para alguien que escriba: <code>websitename.com/user/1</code> será:
<syntaxhighlight lang="html">
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
</syntaxhighlight>
 
== Ecosistema ==
* [[Marco de Javascript|Javascript framework]]
* [[Biblioteca de JavaScript|Biblioteca de Javascript]]
* [[Modelo–vista–modelo de vista|Modelo@–vista@–ViewModel]]
* [[Nuxt.js]]
 
== Fuentes ==
 {{Atribucion de contenido libre|titulo=Vue.js Guide|autor=Vue.js|editorial=|URL del documento=https://vuejs.org/v2/guide|URL de la licencia=https://github.com/vuejs/vuejs.org/blob/fdc66945e18020cdbdc729fd7ab8005d123216a7/LICENSE|licencia=[[Licencia MIT]]}}
 
== Referencias ==
1968

ediciones