Objetos del Héroe - Platzi

Curso Avanzado de Vue.js 2

Curso Avanzado de Vue.js 2

Bienvenida al curso

Qué es Vue y bienvenida al curso

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Crea tu app con el Vue CLI

Blizzard Developer Portal

Comandos del Proyecto

Instalar librerías

Carpeta API

Obtener el token

Creación de los componentes y layouts de nuestro proyecto

Componente Loading

¡Limpiemos el proyecto!

Layouts y Vuex Modules

Assets

NavBar y Footer

Refactorizando

Home Page

Vue Router

Vista Profile

¡Más Componentes!

Listado de Héroes

Progreso (Actos)

Stats y Tiempo Jugado

Cerrando vista Profile

Hero View

Agregando funcionalidades avanzadas a nuestro proyecto

Componentes asíncronos

Objetos del Héroe

Custom Directives

Netlify

About y Error

Actualmente nuestra vista de Hero tiene un bloque de cabecera, otro de atributos (stats) del personaje y el último, con las habilidades.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fabián Antonio Salgado Sepúlveda

Por fin un curso de Platzi, en el cual también puedo escuchar música mientras estudio. 😎😎😊😊

Angel Cabrera

¡Excelente curso, una joyita!
Hemos obtenido un gran boilerplate y una seria de lineamientos para trabajar en proyectos profesionales.

RetaxMaster

Buff, me explota la cabeza el modo de trabajar, me encanta como todo se divide el pequeños componentes y cómo se van pasando datos unos a otros, es genial!

Jose Cortes Jaramillo

Excelente curso, me gusto mucho que fuera diferente a veces uno se cansa de ver tantos videos a 1.5X, ya que vimos la manera de cargar los componentes en lazy loading, deberíamos implementarlo en todos los componentes de nuestra app o como sabemos cuando usar lazy loading y cuando no.
Gracias Jorge excelente profesor!

Eduardo Pech

Excelente clase, muy bueno!

Adrian Ernesto German Becerra

se entiende re bien el código

Glory Esthefanny

Genial el curso, mucho mas entretenido que ver los videos. 😉

Ahora, desde el componente principal de la vista Hero, es decir, en /views/Hero/Index.vue hacemos el ritual de siempre: traer, declarar y utilizar el componente:// Traerimport HeroItems from './HeroItems/Index'// Declararcomponents: { BaseLoading, HeroDetailHeader, HeroAttributes, HeroSkills, HeroItems}Por último, lo usamos:Debería verse así:HeroItemVamos a crear el componente correspondiente a un objeto, que luego reutilizaremos para pintar todos los objetos. A nivel de API, todos los objetos del personaje son iguales, por lo que no tenemos que hacer distinciones.Empezamos creando el fichero /Hero/HeroItems/ItemDetail.vue. Continuamos con la definición básica de nuestro componente:Lo siguiente que vamos a definir son las clases CSS que necesitamos para este componente. Para ello, dentro de style agregamos lo siguiente:.d3-icon-item min-height 100px // El borde de la caja va determinar la rareza del objeto, segun el color que tenga border-top-style solid border-top-width 4px &.item-none border-color transparent &.item-green border-color #8bc34a &.item-orange border-color #ff9800 &.item-yellow border-color #ffeb3b &.item-blue border-color #03a9f4 &.item-white border-color #a0aab5Estas clases las vamos a usar para determinar la calidad de nuestro objeto. Recuerda que el objeto puede ser blanco (normal), azul (mágico), amarillo (raro), verde (de conjunto) o naranja (legendario).En el HTML vamos a poner lo siguiente:Con los comentarios queda bastante claro que hace cada cosa.Ahora necesitamos crear las computed properties que estamos usando en el template. Agregamos, en nuestro bloque de JavaScript, las siguientes funciones (computadas):computed: { // Resuelve la URL de la imagen itemUrl () { const host = 'http://media.blizzard.com/d3/icons/items/large/' return `${host}${this.item.icon}.png` }, // Comprueba si el item tiene gemas itemHasGems () { return Object.prototype.hasOwnProperty.call(this.item, 'gems') }, // Si tiene gemas, comprueba si es Gema o Joya // Puede haber varias Gemas. Solo puede haber una Joya. No puede haber joyas y gemas mezcladas gemOrJewel () { return this.item.gems[0].isGem ? 'Gems' : 'Jewel' }, // Clase CSS para saber la rareza itemClassColor () { if (Object.prototype.hasOwnProperty.call(this.item, 'displayColor')) { return `item-${this.item.displayColor}` } // Si no tiene color (es que no hay objeto equipado) return 'item-none' }}El código completo se ve así:Para terminar, vamos a crear el componente de la gema (o joya). Creamos un nuevo archivo ItemDetailGem.vue al mismo nivel de ItemDetail.vue, es decir, dentro de /HeroItems.El código de este componente es muy simple:El único cambio que hay aquí es que en la URL de la imagen estamos usando el tamaño pequeño (small) en vez del grande (large) que usamos en los demás items.Tenemos que importar este componente en el componente de detalle. Para ello, desde /Hero/HeroItems/ItemDetail.vue agregamos lo siguiente:import ItemDetailGem from './ItemDetailGem'export default { name: 'ItemDetail', components: { ItemDetailGem } // ...}Con esto ya tenemos los componentes de items terminados. Queda llamarlos desde la vista principal y ¡💥! Deberían aparecer todos.Desde /Hero/HeroItems/Index.vue, cargamos el componente de ItemDetail, lo declaramos y los utilizamos:Si tienes todo correcto y sin errores deberías ver algo como esto:En mi caso, todos los personajes que tenía en el momento de crear este escrito estaban a niveles altos y con todos los huecos de equipación completos.Sin embargo, rebuscando por internet, he encontrado un perfil a nivel 1, con varios huecos de items vacíos, y solo una habilidad activa. Así es como se vería:Si has llegado hasta aquí… 🎉 ¡Enhorabuena! 🎉 Ya tienes una super aplicación con datos reales de personajes Diablo III.Esta vista de la aplicación da mucho juego, pues la información que nos devuelve la API es muy extensa. En este curso no hemos trabajado con toda la información existente, ya que se haría demasiado complejo, pero te animo a que hagas extensiones y/o mejoras.También te recuerdo que si quieres contribuir, ya sabes que el repositorio original siempre está abierto a mejoras y sugerencias.En la siguiente lectura veremos cómo crear directivas personalizadas (custom directives).", "url" : "https://platzi.com/clases/1856-avanzado-vue/27770-objetos-del-heroe/", "wordCount" : "52", "publisher" : { "type" : "Organization", "name" : "Platzi INC" } }