Estructurando componentes en Vue.js

Clase 13 de 17 • Curso Básico de Vue.js 2016

Clase anteriorSiguiente clase

Albert Pedrola Martín

student•

Usar scoped dentro del tag de estilos para evitar que el CSS pise los estilos de los componentes

Leonardo Cáceres

student•

Estaba yendo bien hasta antes del pug y el stylus, tengo que volver a ver porque ya no entiendo nada. 😦

Jose Brantes Rodriguez

student•

me pasó exactamente lo mismo 😕

Rony Porraz Vargas

student•

tranquilo esto te ayudara a incorporar vue mejor a tus proyectos 😄

Diego Hernán Moreno Amaya

student•

La utilización del scoped dentro de la etiqueta <style> sería algo como un namespace prácticamente, ésto evita que el CSS pise los estilos de los componentes, por ende es muy recomendable usarlo 😉

Gabriel Flores

student•

No creo que haya sido la mejor idea mezclar tantos conceptos en un curso básico de Vue.js, me refiero a stylus y pug, es propenso para el que está haciendo el curso que le salgan errores referentes a estas librerías en vez de errores de Vue.js el cual debería ser el foco

Raul Arturo Valdivia Cruz

student•

exacto todos mi errores fueron por PUG.

Ronald Cuello

student•

Es verdad todo estaba bien hasta que metieron pug

Andres Evaristo Ruiz Gonzalez

student•

El api de last.fm ya no entrega imagenes :(

Johan Manuel Perez Soto

student•

Vicente López Robles

student•

Antes de que anden revisando que hicieron mal en este ejercicio, les comento que las imágenes ya no las muestra la API, en su lugar muestra una estrella para todas las imágenes

Alan Lapierre

student•

Encontraste alguna solución para esto ? Saludos !!

Vicente López Robles

student•

No puesto que la API es ed Last.fm es lo que ellos entregan.

Angel Infanti

student•

No me cargan las imágenes

Edwar Baron

Team Platzi•

Hola, porfa pon tu código para poder replicarlo y ayudarte.

Jann Carlo Moreno Jiménez

student•

Hola a todos, hasta el momento las imágenes ya no aparecen, al parecer last.fm las elimino o los links están cadudacos, porque ingrese a las direcciones y solo sale la imagen de una estrella. entonces si alguno piensa que es un error, en verdad es por cosas de la API

Alexander Valencia

student•

definitivamente prefiero html normalito y sass

Luis Rogelio Reyes Hernandez

student•

pero hacer eso ya no vale la pena para proyectos muy grandes , es mejor de este modo , que tratar con archivos html de 3000 lineas o mas

Alexander Valencia

student•

visto de esa forma si tiene mucho sentido :)

Elías Parada Pedroso

student•

Para un novato como yo, lo de pug ha sido una pésima idea. Unir conceptos nuevos a sintaxis nueva no es productivo para aprender. Para dejar de usarlo basta con cambiar el atributo lang?

Miguel Fernando Urquijo Gómez

student•

Hola Elías, personalmente antes de tomar este curso de vue realice la carrera de frontEnd, donde aprendes todos los conceptos de html,css y pre-procesadores como Sass o Stylus.

Eduin Morales

student•

En una horita aprende las bases de pug, es realmente sencillo y nos viene agilizar las cosas. Aunque si tienes razón, si no se tiene buenas bases el tema de pug puede confundir

Jose Colmenares

student•

El hecho de que Sasha decidiera utilizar la palabra 'artist' en tantas secciones del código me hizo bastante confuso todo, por esta razón hice mi propia versión de los archivos App.vue y Artist.vue (le cambié el nombre a Band.vue) y las copio a continuación

<template>
  <div id="app">
    <img src="./assets/logo.png"/>
    <h1>PlatziMusic</h1>
    <ul>
      <band v-bind:attribute="artist" v-for="artist in artistas" v-bind:key="artist.mbid"> {{artist.name}}  </band>
    </ul>
  </div>
</template>

<script>
  import Band from './components/Band.vue'
  import getArtist from './api/index'
  export default {
  
  name: 'app',
  data () {
    return {
      artistas: [] //los artistas empiezan como un array vacio
    }
  },
  components:{
    Band //toma el nombre del mismo archivo de .vue
  },
  mounted: function () { //función propia de un elementod e Vue. Se llama cuando ya se ha añadido el elemento al DOM
    getArtist()
      .then( (artist) => {
        this.artistas = artist //this.artistas indica que es el arreglos artistas que forma parte del elemento #app
      })
    }
}
</script>

Y el archivo de Band.vue

<template>
  <li>
    <a v-bind:href="attribute.url" target="_blank">
      <h2> {{attribute.name}} </h2>
    </a>
    <h3>Listerners: {{attribute.listeners}} </h3>
  </li>
</template>

<script>
  export default {
    name: 'band', //debe coincidir con el tag
    props: [ 'attribute' ]
  }
</script>

Omar Flores Grimontt

student•

¿El hecho de que el nombre de los archivos “.vue” empiecen en mayúscula es por convención o por alguna otra razón técnica?

Diego Forero

Team Platzi•

Convención, recuerda que cuando haces el import debes respetar el nombre del archivo respetando las mayúsculas.

Adrian Guerrero

student•

Si hay alguien por ahí que este usando scoped y no le funciona, recargue limpiando cache

Pablo Villaplana Corrales

student•

Quitaron las imagenes de la API

Jonathan Mario Dana

student•

Cual es la diferencia entre

export default y export ?

Fernanda Aragon

student•

Hola Jonatan, mira este ejemplo: Cuando hago un export default quiero decir que se puede importar lo que estoy exportando de una manera implicita:

class Persona {
	// Something
}
export default Persona

Al importar lo puedo llamar de cualquier manera

import Jonatan from './clase'
let persona = new Jonatan()

Ahora bien, si hago un export quiere decir que debe importarse lo que estoy exportando de manera explicita

class Persona {
	// Something
}
export Persona

Al importar lo tengo que llamar explícitamente dentro de las llaves

import { Persona } from './clase'
let persona = new Persona()

Espero hayas entendido la diferencia, saludos!

Aarón González

student•

Con export default puedes llamarlo de varias formas. Con export deberás hacerlo siempre de forma explícita import {NameClass} from ./class

Jorge Enríquez

student•

Tengo este error y no soy capaz de encontrar la solución. ¿Alguien la sabe?

[Vue warn]: Unknown custom element: <artist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

Tengo esto en Artist.vue:

<script>
export default {
name:‘artist’,
props:[‘artist’]
}
</script>

Y esto enApp.vue

export default {
name: ‘app’,
data () {
return {
titulo: ‘Platzimusic (beta)’,
subtitulo: ‘Listado de artistas’,
artists:[]
}
},
componets:{
Artist:Artist
},
mounted:function(){
const self = this
getArtists()
.then(function(artists){
self.artists = artists
//console.log(self.artists)
})
}
}

Manuel Ojeda

student•

En App.vue debería de ser:

components: {
  Artist
}

Si realizaste el import del componente antes de export default debería ser:

Carlos Mauricio Pinell Rengel

student•

Eso de meter otros pre compiladores o pluggins para "facilitar" la programación, termina complicando las cosas. Al fin de cuentas tampoco es que te ahorran mucho código. Yo soy más de la escuela de utilizar el HTML, CSS y Javascript de forma nativa.

Iván Toro

student•

CSS modules.

Ruth Ibarra Mendez

student•

Hablando de estilos scope, tambien es importante que entiendan especificidad en CSS https://www.youtube.com/watch?v=c0kfcP_nD9E

Lucas Daniel Fuentes

student•

Me larga error 😕, ¿Cual es el problema?

Luis Donaldo Lopez Gil

student•

Es al momento de hacer el import del componente, asegurate de que tengan el mismo nombre.

Fernando Ontiveros

student•

Al ser .vue se tiene que importar junto con su extensión

<template>
  <div id="app">
    <img src="./assets/logo.png"/>
    <h1>PlatziMusic</h1>
    <ul>
      <band v-bind:attribute="artist" v-for="artist in artistas" v-bind:key="artist.mbid"> {{artist.name}}  </band>
    </ul>
  </div>
</template>

<script>
  import Band from './components/Band.vue'
  import getArtist from './api/index'
  export default {
  
  name: 'app',
  data () {
    return {
      artistas: [] //los artistas empiezan como un array vacio
    }
  },
  components:{
    Band //toma el nombre del mismo archivo de .vue
  },
  mounted: function () { //función propia de un elementod e Vue. Se llama cuando ya se ha añadido el elemento al DOM
    getArtist()
      .then( (artist) => {
        this.artistas = artist //this.artistas indica que es el arreglos artistas que forma parte del elemento #app
      })
    }
}
</script>

<template>
  <li>
    <a v-bind:href="attribute.url" target="_blank">
      <h2> {{attribute.name}} </h2>
    </a>
    <h3>Listerners: {{attribute.listeners}} </h3>
  </li>
</template>

<script>
  export default {
    name: 'band', //debe coincidir con el tag
    props: [ 'attribute' ]
  }
</script>

[Vue warn]: Unknown custom element: <artist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

export default {
name: ‘app’,
data () {
return {
titulo: ‘Platzimusic (beta)’,
subtitulo: ‘Listado de artistas’,
artists:[]
}
},
componets:{
Artist:Artist
},
mounted:function(){
const self = this
getArtists()
.then(function(artists){
self.artists = artists
//console.log(self.artists)
})
}
}

Estructurando componentes en Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?