Antes de continuar, ¡un repaso!

Desde Vue Mastery 👊😎

Resumen de el modulo de los componentes:

• Un componente se crea gracias a la función Vue.component() esta recibe 2 parámetros, el nombre del componente, y el objeto con la configuración del componente.

• Propiedades nuevas en los componentes:
  Template => Aquí va todo el html que crea el componente.
  Props => Permite traer información del componente padre.

• La forma de enviar información del componente padre, al componente hijo es a través de props.

• La forma de enviar información del componente hijo, al componente padre es a través de eventos.

• El componente hijo nunca debe modificar las propiedades que le pasa el componente padre.

• Los slots, permiten que un componente padre le inyecte HTML en tiempo real a u componente hijo.

• Y por ultimo que los componentes tienen un ciclo de Vida (Lifecycle), Que nos permite conocer como se crea, actualiza y destruye un componente; y así poder encontrar el punto en el que queremos aplicar una acción

hasta ahora hemos aprendido lo basico para el manejo de vue con rendering declarativo y a crear y manejar componentes.

Me gusta el curso y creo q ahora empieza lo bueno para ser profesionales en este FRAMEWORK DE JAVASCRIPT.

Temas vistos hasta ahora:

• Vue.component: Para crear componentes reutilizables.
• Props: Para enviar información al componente hijo.
• Events: Para que el componente hijo se comunique con el componente padre.
• Slots: Insertar código HTML en tiempo real enviándolo de padre a hijo.
• Ciclo de vida: Funciones que permiten ejecutar código conforme el componente pasa por este ciclo.

Muy bueno de verdad muchas gracias.

Me gustaría y creo conveniente dejar resúmenes y conceptos en recursos digitales como PDF demás. Una especie de guía.

De resto seguimos a la práctica (Y)

Me está encantando Vue, sin embargo, no lo veo muy práctico usarlo en el navegador como una librería que renderiza y ejecuta la aplicación durante la carga de la página, no se si en este curso lleguemos a tocar Vue CLI, pero sin duda me gustaría más ver todo esto con Vue CLI para compilar los componentes:D

Hasta ahora todo al 100

Paso mi resumen desde la clase 1 hasta la actual:

Las propiedades declaradas en el scope principal de Vue, se pueden usar como cuerpo de un elemento:
<elemento>{{dataReturnEnVue}}</elemento>

Si pretendo usar el dataReturnEnVue dentro de atributos aqui es donde entra: v-bind:[atributo]
<elemento v-bind:[atributo]="[valorReturnVue]">

Las directivas se usan como atributos:
<elemento v-if=“condicion”>
<elemento v-else-if=“condicion”>
<elemento v-else>

Esto muestra un elemento si la condicion retorna TRUE
<elemento v-show=“condicion”>

La diferencia en v-if y v-show es que v-if remueve el objeto del DOM, v-show por el contrario simplemente oculta con display.

Nos permite renderizar listas/arrays:
array valores:
<ul>
<li v-for="(p,i) in prices" v-bind:key=“p”>
{{i}} - {{p}}
</li>
</ul>
array objetos:
<ul>
<li v-for="(p, i) in priceswd" v-bind:key=“p.day”>
{{i}} - {{p.day}} - {{p.value}}
</li>
</ul>

onclick: v-on determina el evento, luego del : se pone el evento y el método que ejecutara ese evento. Se puede usar el ternary para cambiar texto en el mismo elemento.
<span v-on:click=“toggleShowPrices”>
{{showPrices ? ‘Hide prices’ : ‘Show prices’}}
</span>

directiva v-model: linkea las cosas que escribe un usuario con las propiedades definidas dentro de data.
Two-way data binding, se puede actualizar desde la interfaz o desde las propiedades en segundo plano, esos cambios se verán reflejados en el elemento donde hayamos especificado el v-model y la propiedad correspondiente.

Componentes:
En caracter declarativo se ubican fuera del scope de new Vue({}); ya que para crear componentes reutilizables no es necesario instanciar Vue.
Se usa: Vue.component(’[nombre del elemento]’,{//lo mismo que se usa en la instancia de vue con la diferencia que se puede añadir un template haciendo uso de string literals, dentro se escribe un unico elemento padre(root) y los hijos dentro del mismo, esto se hace en hmtl y se puede combinar con directivas vue.});

slots:
Permiten extender la informacion de un contenedor sobretodo de contenido de un padre hacia un hijo. Se extiende la distribucion de contenido.
en js se usan dentro de template literals.
<slot name="[nombre del slot]"></slot>
podemos tener tantos como queramos.
En html se invoca dentro del componente, haciendo uso de un elemento propio de Vue llamado “template”
<Template v-slot:[nombre del slot]>[Contenido]</Template>

en javascript:
new Vue({
el:’[Selector]’,
data(){//informacion que queremos mostrar},
methods:{todos los métodos que usará vue en la vista},
computed:{
//funciones que del otro lado en el bind se llaman como simples datos/propiedades. Se calculan en tiempo real en base a otras propiedades declaradas en data.
},
watch:{
//se dispara cada vez que cambia el valor de una propiedad. los metodos que se declaran reciben un newValue y un oldValue en ese orden.
},
created:{},
mounted:{},
methods:{}
});

created y mounted forman parte del ciclo de vida de los scopes en vue, mas info en la documentacion del framework. Son eventos que nos podemos atachar si necesitamos realizar alguna acción.

Muchas gracias por tanto!

¡Vamos por el reto! 😃

Problemas Técnicos con la clase 21 del curso Vue Básico, Clase con nombre “Antes de continuar, ¡un repaso!” . Se detiene la transmisión y no avanza casi en la mitad de la clase.