chorro de clases del botón Detalle:
bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-2 border border-green-500 hover:border-transparent rounded
Introducción
Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web
Vue.js: Desarrollo de Aplicaciones Web Profesionales
Creación de aplicaciones reactivas con Vue.js y HTML
Rendering Declarativo y Manipulación de DOM
Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados
Uso de Expresiones JavaScript en Plantillas de Vue.js
Directivas para Atributos Dinámicos en HTML con Vue.js
Directivas de Renderizado Condicional en HTML con Vue.js
Uso de la Directiva v-for en Vue.js para Renderizar Listas
Manejo de Eventos en Vue.js: Click y Mouseover
Condiciones y Clases Dinámicas en Vue.js
Estilos Dinámicos en JavaScript: Cambios de Color Interactivos
Propiedades Computadas y Watchers en Vue.js
Interacción dinámica con formularios y directivas en Vue.js
"Crear un Tracker de Cursos con Vue.js"
Sistema de Componentes
Sistema de Componentes en Fren Word: Modularización y Reutilización
Creación de Componentes Personalizados en Vue.js
Comunicación entre Componentes en Vue.js: Props y Data Binding
Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos
Uso de Slots para Inyectar HTML en Componentes Hijos
Ciclo de Vida de Componentes en Vue.js
Componentes de Vue: Creación y Gestión Eficiente
Componente Modal y Componente Principal en Vue.js
Ambiente de Desarrollo
Configuración Profesional de Vue.js con Visual Studio Code
Creación de Aplicaciones con Dios CLI y su Configuración Básica
Componentes de Archivo Único en Vue.js
Comandos esenciales para proyectos con Vue CLI y configuración de entorno
Platzi Exchange
Instalación y configuración de Tailwind CSS en proyectos HTML
Creación y Gestión de Componentes VUE en Proyectos Web
Creación de Aplicaciones SPA con Vue Router
Uso de Fetch API para Interactuar con Servidores HTTP
Filtros y Directivas para Mejorar Interfaces en JavaScript
Creación de Rutas Dinámicas en Vue.js para Criptomonedas
Navegación Dinámica y Programática en Vue.js
Integración de Componentes de Terceros en Proyectos Vue.js
Manejo de Problemas de Reactividad en Vue.js
Filtros y Ordenamiento en Tablas de Datos con JavaScript
Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js
¡A producción!
Publicación de Aplicaciones con Git y Netlify
Rendering Declarativo y Manipulacion de DOM
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Proveer una navegación intuitiva para el usuario es crucial en cualquier aplicación web. Sin ella, cambiar la URL manualmente puede resultar en una experiencia de usuario poco amigable. Afortunadamente, hay formas de manejar esto eficientemente utilizando Vue Router. Vamos a ver cómo puedes mejorar la navegación y dinamismo de tus componentes.
Cuando queremos que los usuarios puedan navegar fácilmente entre diferentes páginas de una aplicación Vue.js, el componente router-link
es esencial. Este componente permite a los usuarios hacer clic y ser redirigidos a diferentes rutas de manera fluida y dinámica.
<router-link :to="{ name: 'Next', params: { id: a.id } }">
<!-- Contenido del Link -->
</router-link>
params
se usará para añadir datos dinámicos como identificadores.v-bind
(:
) para enlazar con la propiedad de Vue, permitiendo manejar enlaces dinámicos.Además de hacer enlaces navegables, es importante mejorar su aspecto. Agregar clases CSS para efectos visuales como cambios de color al hacer hover mejorará la experiencia del usuario.
<router-link
:to="{ name: 'Next', params: { id: a.id } }"
class="hover:text-green-500"
>
<!-- Contenido del Link -->
</router-link>
Para ofrecer un acceso directo a la home desde cualquier punto de la aplicación, reemplaza etiquetas de texto planas con router-link
. Esto permite que los usuarios vuelvan a la página principal fácilmente.
<router-link to="/">
Platzi PKG
</router-link>
Los métodos programáticos proporcionan una manera más controlada de cambiar rutas desde funciones dentro de los componentes. Es particularmente útil en respuesta a acciones del usuario como clics en botones.
Primero, creamos un componente de botón que hará la navegación cuando se interactúe con él. Este botón se puede estilizar como queramos para que se adecue al diseño de nuestra aplicación.
<template>
<button @click="handleClick">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'PXButton',
methods: {
handleClick() {
this.$emit('custom-click');
}
}
}
</script>
Dentro del componente donde se use el botón, es posible definir un método que maneje la navegación de manera programática utilizando el objeto $router
.
<script>
export default {
methods: {
goToCoin(id) {
this.$router.push({ name: 'CoinDetail', params: { id: id } });
}
}
}
</script>
Enlaza este método al evento del botón. Asegúrate de pasar correctamente cualquier parámetro dinámico necesario:
<template>
<PXButton @custom-click="goToCoin(a.id)">Detalle</PXButton>
</template>
Con estas técnicas, puedes ofrecer una experiencia de usuario más fluida e integrar funcionalidades de navegación robustas en tus aplicaciones Vue.js. Continúa explorando y aplicando estas herramientas para descubrir su pleno potencial.
Aportes 19
Preguntas 11
chorro de clases del botón Detalle:
bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-2 border border-green-500 hover:border-transparent rounded
Pero fuera de bromas: ¿Está mal la alternativa que usé mientras me adelantaba a ti?
v-on == @
v-bind == :
Como sabran vengo haciendo una versión adaptada en bootstrap, voy pasando mis resultados.
Navegación Programática:
this.$router.push({name: component, params:valueId})
shorthand: “v-on:” por “@”
En los personal me gusta mas poner el link directamente en el botón, siento que esto del this.$router.push() es más para hacer redirecciones desde el código xD Algo así como un document.location.href
Hay alguna diferencia entre las 2 maneras de hacer las rutas?
router-link vs $router.push ?
Si this
te aparece como undefined
y no puedes usar this.$router
, puede ser que estes usando un arrow function en lugar de una función normal.
Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.
Me costo mucho entender que hacia mal, espero que le sirva a alguien. ;D
Creo que es mejor usar elementos nativos como el anchor, cuando queremos cambiar de rutas en la app. Ya que de esa manera ayuda al SEO y a los motores de búsqueda a detectar los links disponibles en nuestra web.
En resumen, creo que es mejor usar <router-link to="… en vez de <button @click=“goToSomeRoute” 🤔
Alguien podria aclararme cual es la diferencia entre “$route” y “$router”? Es decir, a que estan haciendo referencia cada uno?
Aunque esta opción de:
parece mucho esfuerzo para un simple redirección, te da ideas para más adelante hacer cosas personalizadas. Por ejemplo si quisieras guardar algunas estadísticas o enviar otra información paralela a otro lugar.
y si se hace de esta manera que ventajas o deficiencias habria?
<router-link :to="coin/${a.id}
">
Saben por qué cuando creo un repositorio local con git no sirve el servidor CLI? Cada vez que guardo un cambio debo volver a correr el comando npm run serve.
Logré hacer que muestre la información de las criptomonedas.
Primero, creamos un archivo vue.config.js:
module.exports = {
devServer: {
proxy: "https://api.coincap.io/v2/assets/",
},
};
Y, tuve que eliminar la imagen pues parece que ya no encuentra esta información:
<template>
<div class="flex-col">
<template>
<div class="flex flex-col sm:flex-row justify-around items-center">
<div class="flex flex-col items-center">
<h1 class="text-5xl">
{{ asset.name }}
<small class="sm:mr-2 text-gray-500">{{ asset.symbol }}</small>
</h1>
</div>
<div class="my-10 flex flex-col">
<ul>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Ranking</b>
<span>#{{ asset.rank }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio actual</b>
<span>{{ asset.priceUsd | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio más bajo</b>
<span>{{ min | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio más alto</b>
<span>{{ max | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio Promedio</b>
<span>{{ avg | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Variación 24hs</b>
<span>{{ asset.changePercent24Hr | percent }}</span>
</li>
</ul>
</div>
<div class="my-10 sm:mt-0 flex flex-col justify-center text-center">
<button
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
>
Cambiar
</button>
<div class="flex flex-row my-5">
<label class="w-full" for="convertValue">
<input
id="convertValue"
type="number"
class="text-center bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
/>
</label>
</div>
<span class="text-xl"></span>
</div>
</div>
</template>
</div>
</template>
<script>
import api from "@/api";
export default {
name: "CoinDetail",
data() {
return {
asset: {},
history: [],
};
},
computed: {
min() {
return Math.min(
...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
);
},
max() {
return Math.max(
...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
);
},
avg() {
return (
this.history.reduce((a, b) => a + parseFloat(b.priceUsd), 0) /
this.history.length
);
},
},
created() {
this.getCoin();
},
methods: {
getCoin() {
const id = this.$route.params.id;
Promise.all([api.getAsset(id), api.getAssetHistory(id)]).then(
([asset, history]) => {
this.asset = asset;
this.history = history;
}
);
},
},
};
</script>
<style scoped>
td {
padding: 10px;
text-align: center;
}
</style>
Es posible observar la acción de cambio de rutas?
la navegacion programatica es otra forma que tenemos de crear rutas para navegar en el sitio.
casi me pierdo!!!
alguien sabe por que sucede esto? pero en el navegor funciona bien el error me dio cuando copie el archivo CoinDetail.vue que esta en Archivos y enlaces.
![](
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?