Layout

Clase 5 de 21 • Curso Práctico de Vue.js

José Reinaldo Duque Serna

student•

Aquí el style de Movements.vue

<style scoped>
.movements {
  max-height: 100%;
  padding: 0 8px;
  margin-bottom: 14px;
}

.title {
  margin: 8px 16px 24px 16px;
  color: var(--brand-blue);
}

.content {
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
}
</style>

Jose Morales Varon

student•

Gran aporte!

Juan Guillermo Perez Cardozo

student•

impresionante e inspirador ver como se integra todo lo aprendido

José Reinaldo Duque Serna

student•

Comparto el style de Resume/Index.vue

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

h1,
p {
  margin: 0;
  text-align: center;
}

h1 {
  margin-top: 14px;
  color: var(--brand-green);
}

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}
</style>

Jose Morales Varon

student•

Gran aporte!

Cristian Fernando Gonzalez Paez

student•

Al momento de importar los componentes, no es necesario añadir la extensión .vue Incluso, sí importas un componente llamado index.vue, sólo basta con poner el nombre de la carpeta contenedora

import Layout from "./Layout";
import Header from "./Header";
import Resume from "./Resume/";
import Movements from "./Movements";

Miguel Angel Reyes Moreno

student•

En algunos casos es necesario así que me parece que es más recomendable sí dejar la extensión .vue

Claudia Gomez

student•

¿Por qué utilizamos slots y no componentes dentro de otros componentes en el Layout?

Diana Martinez

student•

Se podría hacer de las dos formas, pero, cómo menciono en el curso, al utilizar slots, podemos separar la lógica de cómo se posicionan los componentes (layout), de los componentes que se vayan a usar.

Por ejemplo, podríamos tener dos versiones del componente Header, y así podríamos poner cualquiera de los dos en el slot al usarlo, sin tener que modificar el componente Layout, así, mantenemos el código corto y reutilizable, porque el componente Layout nunca se tiene que "enterar" exactamente qué habrá en el slot.

Si lo hiciéramos poniendo directamente los componentes en el template del Layout, estaríamos fijando que se vea ese y solo ese componente, y si quisiéramos poder tener dos o más versiones del Header, por ejemplo, comenzaríamos a agregar mucha lógica de condicionales para decidir cuál poner.

Terminaríamos con un componente Layout demasiado acoplado al resto de los componentes, y cada que crearamos una nueva versión de Header, habría que volver a Layout y agregar más y más código condicional.

Mientras tanto, al usar slots, nos olvidamos de todas esas complicaciones y resolvemos el problema antes de que exista.

Al final es cuestión de decisiones al programar, yo esto lo aprendí en años de trabajo en la industria, pero mucha gente lo haría de la otra forma.

Alexander Agrazal

student•

cómo se hace el return cuando se usa script setup

<script setup >

por que usando export default sería asi:

export default {
setup()
{ 
	return { } 
}}

Diana Martinez

student•

En resumen, cuándo usas script setup, todo el cuerpo de ese tag es tu función script, y el export se hace automáticamente de todo el scope, así que basta declarar una variable o función, para que sea accesible cómo si le hubieras hecho return.

Para más detalles, hay una clase sobre este tema en el curso anterior a este, que es parte de esta saga: https://platzi.com/clases/2820-vuejs-componentes-composition/46970-script-setup/

Jose Morales Varon

student•

Básicamente en COMPOSITION API no necesitas hacerlo, no es necesario ya que se hace automáticamente. Todo lo que esté dentro del script está disponible para poder ser usado dentro del componente. 🤩

MAXIMILIANO JAYME DAHLQUIST

student•

Hice un punto intermedio con la animación de movements. Al hacer click en el head sube y baja.

<template>
    <div class="header">
        <slot name="header"></slot>
    </div>
    <div class="resume">
        <slot name="resume"></slot>
    </div>
    <div class="movements" :class="{ 'movements-visible': showMovements, 'movements-hidden': !showMovements }">
        <div class="head" @click="showMovements = !showMovements">
            <div class="grip"></div>
        </div>
        <div class="body">
            <slot name="movements"></slot>
        </div>
    </div>

</template>

<script setup>
    import { ref } from "vue";
    const showMovements = ref(false);
</script>



<style scoped>
    .header,
    .resume,
    .movements {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 14px 0;
    box-sizing: border-box;
    }
    .header {
    position: fixed;
    width: 100vw;
    }
    .resume {
    min-height: 100vh;
    }

    .movements {
    z-index: 1;
    position: fixed;
    display:flex;
    flex-direction: column;
    left: 0%;
    width: 100vw;
    background-color: white;
    box-shadow: 0 -4px 14px #e5e5e5;
    border-radius: 24px 24px 0px 0px;
    }
    .movements .head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    }
    .movements .body {
    height: 75vh;
    width: 100%;
    }
    .movements .head .grip {
    width: 120px;
    height: 8px;
    background-color: #e5e5e5;
    border-radius: 4px;
    }
    .movements {
    transition: transform 0.3s ease-out;
    }
    .movements-hidden {
        transform: translateY(-76px);
    }
    .movements-visible {
        transform: translateY(-100%);
    }

</style>

Layout

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?