La comunicacion de un padre a un hijo es por medio de propiedades, mientras q la comunicacion de un hijo a un padre es por medio de eventos.
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 22
Preguntas 4
La comunicacion de un padre a un hijo es por medio de propiedades, mientras q la comunicacion de un hijo a un padre es por medio de eventos.
Este es mi resultado:
Fue una clase muy buena, recorando conceptos del curso basico de vue.js, y es interesante como con un objeto podemos guardarnos el hecho de pasar varias props al componente hijo, sera algo a tomar en cuenta para proyectos futuros.
Código de la clase: https://github.com/paolojoaquin/platzi-music/tree/Clase/27
Esto también lo vimos en el curso básico de una manera un poco más simple, mi único problema es que la API no esta disponible pero estoy simulando una hardcodeada jaja #NuncaParesDeAprender (?
Con el CLI 3 de Vue ya no es necesario hacer la modificación en el webpack.config. Automáticamente, al escribir @, el intérprete ya sabe que se está haciendo referencia a la carpeta source.
child to father
this.$emit(“name_event”, data)
recive in father
@name_event=“function”
Loader.vue:
<template lang="pug">
.container
.load.has-text-centered
h1.title Cargando...
</template>
<style lang="scss">
.load {
padding: 20px;
min-height: 40vh;
}
</style>
para usar en laravel 5.7
en el archivo de webpack.mix.js
mix.webpackConfig({
resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’],
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
’@’:path.resolve(__dirname, ‘resources/js’)
},
},
})
pero no se como usar en <style lang=“scss” scoped> para importar estilos ? ya que @import ‘@/plugin/datatable/estilos.css’ no me resuelve la ruta, pero si la uso por import en <script> va ok pero me queda global y me afecta demas estilos, que hacer?
Creo que hubiera sido mejor agregar el loader debajo del search
porque en los componentes pasados no usamos export ?
Genial!
15:27 //_ No se preocupen se esta viendo horrible pero lo vamos a acomodar._
jejejejeje, 😂 típico del desarrollo en Frontened
Hay alguna manera de implementar FontAwesome al proyecto. Lo he intentado pero al final no me muestra el icono de fuente.
Hice modificaciones al archivo webpack para que cargue los archivos de fuente y svg, ya no hay error en la carga de archivos, pero no me los muestra.
Ahora si entiendo que función tiene un componente.
Eso profe muy bien.
Me daba conflicto lo de paso de propiedades y paso de eventos.
Pero con el gráfico me ha quedado muy claro.
Por cierto, seria excelente el me pueda compartir ese gráfico junto con el de reactividad, esos hay que guardarlos muy bien.
Con respecto a la clase .is-1by1, son clases de bulma para la Relación de aspecto, que en este caso significa 1 x 1 (cuadrado), también existen para definir directamente el tamaño de la imágenes.
Para relación de aspecto:
.image.is-square // 1x1
.image.is-1by1 // 1x1
.image.is-5by4 // 5x4
.image.is-4by3 // 4x3
.image.is-3by2 // 3x2
.image.is-5by3 // 5x3
.image.is-16by9 // 16x9
.image.is-2by1 // 2x1
.image.is-3by1 // 3x1
.image.is-4by5 // 4x5
.image.is-3by4 // 3x4
.image.is-2by3 // 2x3
.image.is-3by5 // 3x5
.image.is-9by16 // 9x16
.image.is-1by2 // 1x2
.image.is-1by3 // 1x3
Para dimensión:
.image.is-16x16 // 16x16px
.image.is-24x24 // 24x24px
.image.is-32x32 // 32x32px
.image.is-48x48 // 48x48px
.image.is-64x64 // 64x64px
.image.is-96x96 // 96x96px
.image.is-128x128 // 128x128px
más información: aquí
Es importante agregar el atributo scoped en los estilos del Loading.vue, de lo contrario la modificación de la clase .content también va a afectar a las cards de música.
<template lang="pug">
.container
.content
h1 Cargando ...
</template>
<style lang="scss" scoped>
.content {
padding: 20px;
min-height: 40vh;
}
</style>
Les recomiendo mucho estos estilos para el loader https://projects.lukehaas.me/css-loaders/ los vimos en el curso pasado y son muy elegantes
Los componentes hijos no pueden modificar o mutar las propiedades que vienen de un componente padre.
Puede ser que tangan problemas con la API de platzi music?
Access to fetch at 'https://platzi-music-api.now.sh/search?q=daft%20punk&type=track' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Creo que la api ya no funciona.
Cambio en webpack para crear un alias que nos permitirá manejar crear un ruta absoluta(nuestra carpeta raíz de proyecto)
El curso está bueno, pero la verdad el hecho de tener PUG, BULMA (conceptos nuevos) no ayudan mucho a que la enseñanza se centralice en VUE que es el interés de este curso.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.