Mejorar proyecto: links y conversión

Curso Básico de Vue.js 2

Introducción

Qué aprenderás sobre Vue.js 2

El Framework Progresivo

¡Hola Vue!

Rendering Declarativo y Manipulación de DOM

Introducción al Rendering Declarativo

Expresiones y Propiedades

Atributos Dinámicos

Control de Flujo con Directivas

Renderizado de Listas

Manejo de Eventos

Clases en tiempo real

Estilos en tiempo real

Computed Properties y Watchers

Two-Way Data Binding

Ejercicios de práctica módulo 2

Sistema de Componentes

Crear Componentes Custom

Comunicación entre Componentes: propiedades

Comunicación entre Componentes: eventos

Slots

Ciclo de Vida y Hooks

Antes de continuar, ¡un repaso!

Ejercicios de práctica

Ambiente de Desarrollo

VS Code + Vetur / Chrome / Firefox + Dev Tools

Qué es, cómo usarlo y aplicaciones profesionales con el CLI

Single File Components

Funcionalidades, UI y comandos básicos

Platzi Exchange

Introducción y Setup de Tailwind CSS

Primeros Componentes

Introducción y Setup de Vue Router

Introducción a Fetch y API de Coincap

Mejorar la UI con filtros

Rutas dinámicas

Navegación Programática

Utilizar componentes de terceros

Problemas de Reactividad

Mejorar proyecto: filtros y ordenar

Mejorar proyecto: links y conversión

¡A producción!

Despliegue de la app a Netlify

Rendering Declarativo y Manipulacion de DOM

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to prepare our application for production with Vue Router?

We are on the verge of sending our application to production! Before letting off the fireworks, we need to make some key adjustments to our Vue application, especially in the use of Vue Router and dynamic routes. Here we will cover how to optimize our code and deliver a seamless user experience.

How do we use RouterLink dynamically in Vue?

We can enhance our application by using RouterLink to display dynamic links that are received from a parent component. To do this, we must add a property in our props component to handle the list oflinks. Here is how we can configure RouterLink to display each link received.

<template> <div> <router-link v-for="link in links" :to="link.to"> {{ link.title }} </router-link> </div></template>
<script>export default { props: { links: { type: Array, default: () => [] } } }</script> </script>

How to solve common problems with dynamic routes and Vue Router?

A common problem when working with dynamic routes is that when changing a parameter in the URL, the corresponding component is not recreated from scratch, which can result in the content not being updated as expected. Fortunately, we can solve this by using a 'watcher'.

<script>export default { watch: { '$route.params': 'fetchData' }, methods: { fetchData() { // logic for fetching new information } } }</script>

How to implement a cryptocurrency conversion function?

Cryptocurrency conversion functionality is crucial, especially if you want your application to be dynamic and useful. To enable conversions between currencies, you will use a computed property that manipulates the entered value and transforms it as needed.

<template> <div> <input v-model="convertValue" @input="convertCurrency"/> <button @click="toggleConversion">Change Dollar/Bitcoin</button> <span>{{ convertedValue }}</span> </div></div> </template>
<script>export default { data() { return { fromDollar: true, convertValue: null, } }, computed: { convertedValue() { if (!this.convertValue) return 0; return this.fromDollar ? this.convertValue / this.currentPrice : this.convertValue * this.currentPrice; } } }, methods: { toggleConversion() { this.fromDollar = !this.fromDollar; } } }</script>

What else should we consider before taking the Vue application to production?

In addition to technical functionality, it is crucial to improve the user experience and optimize the small details. This involves styling components appropriately, ensuring that the interface is intuitive and user-friendly, and fixing minor bugs, such as handling loading correctly.

<template> <button v-if="!isLoading">Get Link</button> <span v-if="isLoading">Loading...</span></template>
<script>export default { data() { return { isLoading: false } }, methods: { fetchData() { this.isLoading = true; setTimeout(() => this.isLoading = false, 2000); // simulating wait } }</script> </script>

With all these elements in place, your Vue application is almost ready for the big exit! Stay tuned for the next steps where you will learn how to definitely move your application to production and let the whole world enjoy it. Keep learning and never stop improving your skills!

Contributions 46

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Erick Daniel Pérez Mata

5 years ago

HTML:

<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" ></router-link>

Data:

links: [
        {
          title: 'BTC',
          to: { name: 'coin-detail', params: { id: 'bitcoin' } }
        },
        {
          title: 'ETH',
          to: { name: 'coin-detail', params: { id: 'ethereum' } }
        },
        {
          title: 'XRP',
          to: { name: 'coin-detail', params: { id: 'ripple' } }
        }
      ]```

Diego Camino Reinoso

5 years ago

Bueno, yo vine buscando cobre y me voy con ORO, encima con un súper proyecto de portafolio, no puedo creerlo, y eso que es el curso BÁSICO de VUE.

Nacho te amo ❤️ SOS GRANDE!

Brayan Mateo Montañez Baron

5 years ago

Este curso dio mas de lo que esperaba. Excelente profesor, excelentes clases, material de apoyo para cada clase y explicación de como instalarlo, un poco de UX y mucho mas.
Muchas gracias

RetaxMaster

5 years ago

La API cambió el nombre de ripple por xrp, aspi que cuando seleccionen XRP no les va a servir, lo unico que tienen que hacer es cambiar dentro de links en el objeto de xrp, en donde dice params, hay que cambiar “ripple” por “xrp” y funcionará de nuevo.

Andrés Felipe Rodríguez Rincón

5 years ago

Les cuento que a mi no me funcionó la actualización de coin-detail con los watchers y tenía todo igual que en el video. A pesar de que si estaba cambiando la variable $route el watcher no me reconocía el cambio, entonces fuí a leer la documentación y encontré esta función beforeRouteUpdate

Mi código quedó así, esto lo puse después del hook created():

  beforeRouteUpdate(to, from, next) {
    next()
    this.getCoin()
  },

David Campos