Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:38

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

Curso Básico de Vue.js 2

Clase 37 de 38

Clase 37 / 38

Recursos

¿Cómo preparar nuestra aplicación para producción con Vue Router?

¡Estamos al borde de enviar nuestra aplicación a producción! Antes de soltar los fuegos artificiales, debemos realizar algunos ajustes clave en nuestra aplicación Vue, especialmente en la utilización de Vue Router y rutas dinámicas. Aquí cubriremos cómo optimizar nuestro código y ofrecer una experiencia de usuario perfecta.

¿Cómo usamos dinámicamente RouterLink en Vue?

Podemos mejorar nuestra aplicación utilizando RouterLink para mostrar enlaces dinámicos que son recibidos de un componente padre. Para esto, debemos agregar una propiedad en nuestro componente props para manejar la lista de enlaces (links). A continuación, se muestra cómo podemos configurar RouterLink para que muestre cada enlace recibido.

<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>

¿Cómo resolver problemas comunes con rutas dinámicas y Vue Router?

Un problema habitual cuando se trabaja con rutas dinámicas es que al cambiar un parámetro en la URL, el componente correspondiente no se vuelve a crear desde cero, lo cual puede provocar que el contenido no se actualice como se espera. Afortunadamente, podemos resolverlo utilizando un 'watcher'.

<script>
export default {
  watch: {
    '$route.params': 'fetchData'
  },
  methods: {
    fetchData() {
      // lógica para obtener nueva información
    }
  }
}
</script>

¿Cómo implementar una función de conversión de criptomonedas?

La funcionalidad de conversión de criptomonedas es crucial, especialmente si deseas que tu aplicación sea dinámica y útil. Para permitir conversiones entre monedas, se utilizará una computed property que manipule el valor ingresado y lo transforme según sea necesario.

<template>
  <div>
    <input v-model="convertValue" @input="convertCurrency"/>
    <button @click="toggleConversion">Cambiar Dólar/Bitcoin</button>
    <span>{{ convertedValue }}</span>
  </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>

¿Qué más debemos considerar antes de llevar la aplicación Vue a producción?

Además de la funcionalidad técnica, es crucial mejorar la experiencia del usuario y optimizar los pequeños detalles. Esto implica estilizar componentes adecuadamente, asegurar que la interfaz sea intuitiva y amigable, y corregir errores menores, como el manejo del loading correctly.

<template>
  <button v-if="!isLoading">Obtener Link</button>
  <span v-if="isLoading">Cargando...</span>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      setTimeout(() => this.isLoading = false, 2000); // simulando espera
    }
  }
}
</script>

¡Con todos estos elementos en su lugar, tu aplicación Vue está casi lista para la gran salida! Mantente atento para los siguientes pasos donde aprenderás cómo trasladar tu aplicación definitivamente a producción y permitir que el mundo entero la disfrute. ¡Sigue aprendiendo y nunca dejes de mejorar tus habilidades!