Bienvenida e Introducci贸n

1

Bienvenida y Presentaci贸n del proyecto: PlatziRooms

2

Creaci贸n y configuraci贸n inicial del proyecto utilizando VUE CLI 3

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

驴Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creaci贸n de un componente con createElement

7

Utilizando JSX para la creaci贸n de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la l贸gica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librer铆as externas

12

Componentes Controlados y Variables Personalizadas

13

Construcci贸n del componente de Recordar Contrase帽a

14

Creaci贸n de un componente Slider utilizando la librer铆a tiny-slider

High Order Functions

15

驴Qu茅 son las High Order Functions? - Crea tu primera HOF

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter din谩mico en Vuex utilizando HOF

19

Creaci贸n de la vista para creaci贸n de publicaciones

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalaci贸n y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegaci贸n de nuestra App

Autenticaci贸n con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesi贸n de usuario

29

Cierre de sesi贸n de usuario

30

Protegiendo p谩ginas utilizando Navigation Guards

Scoped Slots

31

驴Qu茅 son los Scoped Slots? D贸nde utilizarlos y por qu茅

32

Integraci贸n de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Componentes Controlados y Variables Personalizadas

12/34
Recursos

Los componentes controlados nos ayudan a tener el control sobre diferentes partes de un componente a trav茅s de par谩metros.

Podemos usar la propiedad v-model para conectar variables con componentes y personalizar el contenido de la aplicaci贸n. Sin embargo, toda la l贸gica de nuestros componentes quedan en un mismo lugar, lo que los hace m谩s dif铆cil reutilizar. Por lo tanto, vamos a crear un nuevo componente para cada parte o funcionalidad reutilizable de nuestra aplicaci贸n pero configurados de tal forma que la l贸gica es controlada por los componentes padres, no por el mismo componente.

Aportes 22

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Los componentes controlados son componentes super reutilizables que necesitan ser llamados por otros componentes para tener su l贸gica completa y funcionar correctamente.

Es como si dejaran algunos 煤ltimos detalles de implementaci贸n para despu茅s pero, en realidad, le dejan la tarea al componente pap谩 para poder funcionar de formas diferentes de acuerdo a las necesidades de cada parte de la aplicaci贸n.

Vale, con componentes tambi茅n podemos hacer el TwoWay Data Binding, en donde para usar el v-model tenemos que lanzar un evento llamado 鈥渋nput鈥 y escuchar una propiedad llamada 鈥渧alue鈥,pero para no tener que usar siempre esos nombres, podemos personalizarlos usando la propiedad 鈥渕odel鈥 que tiene Vue,

Y cu谩ndo un componente no es controlado?

Se trata simplemente de hacer que el componente sea mas flexible y reutilizable. El termino 鈥渃omponente controlado鈥 no se si es el adecuado, o si se usa de forma amplia. Los camponentes tienen entradas y salidas de datos (por medio de eventos) y mientras mas gen茅ricos sean, mas f谩cil es usarlos dentro del mismo proyecto鈥 inclusive, en otros proyectos鈥

Un tema sencillo con una explicaci贸n complicada

Alguien tiene recursos sobre este tema, el profe lo complic贸 demasiado y el tema se ve interesante


<toggle-input
	v-model="form.newsletter"
></toggle-input>

// hace lo mismo que...

<toggle-input
	:value="form.newsletter"
	@input="(value) => { this.form.newsletter = value }"
></toggle-input>

Dejo el link donde se explica m谩s detalladamente
https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

como har铆a en el caso que desee enviarle varios parametros desde el padre al hijo鈥? es decir como haria para recibir varios props.
En ese caso no puedo usar v-model as铆

Por si desean profundizar m谩s acerca de este tema del Data Binding, les dejo el siguiente enlace que apoya a esta clase: https://platzi.com/clases/1145-vuejs-profesional/7795-data-binding/
Espero que les sirva 馃槈

El profe no hace entender mucho, algui茅n tiene otros recursos para seguir aprendiendo, como videos o blogs que hablen de este tema?

Excelente clase! Creer铆a que es una de las mas 煤tiles para entender el two way data binding vue. Gracias

Para hacer esto en vue3 pueden revisar este comentario

A ustedes esto no les marca error en css
esta en el componente modal

	@apply absolute bg-white p-4 shadow-lg rounded;
}

Esta clase no le entend铆 nada.
Bastaba con que dijiera que el v-model se comporta de forma distinta en los componentes hijos.

Los estilos CSS del ToggleInput

`<style>
.toggle {
  position: relative;
  display: inline-block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 9999px;
  cursor: pointer;
  height: 1.5rem;
  width: 3rem;
}
.toggle:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 4px rgba(52, 144, 220, 0.5);
  box-shadow: 0 0 0 4px rgba(52, 144, 220, 0.5);
}
.toggle:before {
  display: inline-block;
  border-radius: 9999px;
  height: 100%;
  width: 100%;
  background-color: #dae1e7;
  content: "";
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.toggle[aria-checked="true"]:before {
  background-color: #3490dc;
}
.toggle:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 9999px;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fff;
  border-width: 1px;
  border-color: #dae1e7;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  content: "";
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.toggle[aria-checked="true"]:after {
  -webkit-transform: translateX(1.5rem);
  transform: translateX(1.5rem);
}
</style>````

parte en que empieza a hacer el v-model

Custom model

Custom model prop names

Me toco ver dos veces el video, pero ya entend铆 como funciona bien los eventos del hijo que se env铆an al podre y como estos se escuchan

Si entend铆 bien v-model sirve para evitar datos (props para el hijo) y escuchar el evento emitido por el hijo? Poniendo las propiedades de model en el hijo cierto, para especificar cu谩l es prop y cu谩l el evento a emitir?

Excelente no sab铆a que pod铆a aplicar v-model en custom components! A aplicarlo desde ahora!

Excelente clase, no sabia que podia usar v-modal para componentes persoanlizados. Pensaba que unicamente se podia usar en campos Inputs. Ahora voy a utilizarlos y a crear personalizados en lugar de utilizar por default value y emit input. Desconocia por completo model dentro del componente vue.