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

Creación de un componente Slider utilizando la librería tiny-slider

14/34
Recursos

Aportes 16

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

De esta clase resalto:

  • this.$el hace referencia al elemento padre del componente.
  • Anteponer el símbolo $ al nombre de una propiedad dentro del método data de la instancia anula toda la reactividad de esa propiedad.

Aqui el ejemplo con VueTinySlider:

<template>
  <tiny-slider
    :mouse-drag="options.mouseDrag"
    :auto-init="options.autoInit"
    :loop="options.loop"
  >
    <slot></slot>
  </tiny-slider>
</template>
<script\>
import VueTinySlider from 'vue-tiny-slider'

export default {
  name: 'Slider',
  components: {
    'tiny-slider': VueTinySlider
  },
  props: {
    options: {
      type: Object,
      default: {
        mouseDrag: false,
        loop: true,
        autoInit: true,
        controls: true
      }
    }
  }
}
<script\>
<style lang="scss">
@import './node_modules/tiny-slider/src/tiny-slider.scss';
</style>```

También podemos usar el componente/librería tiny-slider 2.0 for Vue con toda la implementación de la librería base ya lista para usar en nuestra aplicación con Vue.

Para los que usamos npm

npm i tiny-slider

En este enlace hay una explicación detallada de los componentes controlados.
link

por parte de la reactividad no es mejor usar $mount en vez de $el? si solo vamos a usar esa instancia para un propósito especifico

¿Que diferencia hay entre usar la librería de forma tradicional (más rápido) a convertirla en un componente (mucho código)?,

Podemos ahorrarnos la escritura de los divs con esta linea gracias a emmet

.slider-item{$}*6

tiny-slider 2.0 for Vue

Pregunta, el metodo beforeDestroy se invoca a través del hook beforeDestroy() del componente vue?

Profe que extension usa para el autocompletado de los archivos veo que es muy eficiente vscode en esa parte o solo son ideas mia?

Me encanto está clase

Bravo, bravisimo!!. Excelente clase.

Les comparto mi código de TinySlider.vue

<template>
  <div class="slider-wrapper">
    <slot></slot>
  </div>
</template>

<script>
import { tns } from 'tiny-slider/src/tiny-slider';
import 'tiny-slider/dist/tiny-slider.css';

export default {
  name: 'TinySlider',
  data() {
    return {
      $slider: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const settings = {
        container: this.$el,
        mode: 'gallery',
      };
      this.$slider = tns(settings);
    },
  },
  beforeDestroy() {
    if (this.$slider) {
      this.$slider.destroy();
    }
  },
};
</script>

Increíble, esto significa que puedo tomar cualquier librería ya existente y transformarla a un componente de Vue:D esto puede ser bueno pues no me obligo a buscar librerías que estén únicamente desarrolladas con Vue