Header y contenido

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

Santiago Gonzalez

student•

Estilos de Header.vue

<style scoped>
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}
img,
span {
  width: 48px;
}
h1 {
  font-size: 1.4rem;
  color: var(--brand-blue);
}
h1 span {
  color: var(--brand-green);
}
</style>

Alvaro Eduardo Armijos Sarango

student•

El header va sin el punto:

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}

Santiago Jimenez Moncada

student•

va con punto por que tiene una clase

Jesus Abel Jimenez Bracho

student•

Estilos de layout

<<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: absolute;
  flex-direction: column;
  bottom: 0;
  width: 100vw;
  background-color: white;
  box-shadow: 0 -8px 16px #e5e5e5;
  border-radius: 24px;
}
.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;
}
</style>>

Sergio Fernandez

student•

El header va sin .

César Andrés Aguilar Párraga

student•

En el layout.vue si va con punto porque es una clase, ahi hay un div con una clase header

Victor Roberto López Marroquín

student•

Por si tienen dudas o si como yo, ya pasaron los anteriores 2 cursos, pero nunca lograron determinar cuáles eran los plugins de VSCode les dejo un tutorial con plugins interesantes y posiblemente los mismos de la profe: https://flaviocopes.com/vue-vscode/

Yormi Altamiranda

student•

Dato de vital importancia

Santiago Gonzalez

student•

Estilos de Layout.vue

<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: absolute;
  flex-direction: column;
  bottom: 0;
  width: 100vw;
  background-color: white;
  box-shadow: 0 -8px 16px #e5e5e5;
  border-radius: 24px;
}
.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;
}
</style>

Sergio Fernandez

student•

El header va sin .

Josue Cerron Tuesta

student•

Gracias!

Francisco Javier Cervantes Candelario

student•

Para crear la estructura básica de un componente en visual studio code, teclea:

vue:template

y el editor de código te autocompletará el código básico.

Juan Guillermo Perez Cardozo

student•

no me funciona, que plugin tienes instalado ?

Rene Linares

student•

Hola! Tengo una pregunta. Al traerme al home el componente de layout y el header no los renderiza. Solo renderiza el home sin estos ultimos. Me sale ademas los siguientes warn en consola: [Vue warn]: Failed to resolve component: HeaderComp If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <HomeComp> at <AsyncComponentWrapper> at <App> . [Vue warn]: Failed to resolve component: LayoutComp If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <HomeComp> at <AsyncComponentWrapper> at <App> . . Aqui dejo mi codigo:

// Codigo de HomeComp
<template>
  <LayoutComp>
    <template #header>
      <HeaderComp></HeaderComp>
    </template>
  </LayoutComp>
</template>

<script>
import { LayoutComp } from "./LayoutComp.vue";
import { HeaderComp } from "./HeaderComp.vue";

export default {
  components: {
    LayoutComp,
    HeaderComp,
  },
};
</script>

//Codigo de LayoutComp
<template>
  <div class="header">
    <slot name="header"></slot>
  </div>
</template>

Es como si estuviera importando bien el componente HomeComp a App pero como si no estuviera importando bien HeaderComp y LayoutComp a HomeComp. Donde puede estar el problema? Ayuda, por favor

Diana Martinez

student•

No estoy segura, pero muy probablemente sea que haces el import con llaves:

import { LayoutComp } from "./LayoutComp.vue";
import { HeaderComp } from "./HeaderComp.vue";

Y debería funcionar sin llaves:

import LayoutComp from "./LayoutComp.vue";
import HeaderComp from "./HeaderComp.vue";

Rene Linares

student•

Sí, efectivamente en eso estaba el error. Ahora todo funciona🥳 El problema es que Volar autocompleta el import con las llaves. Y al parecer las llaves solo funcionan para importar funciones no para los componentes Busque ayer todo el día en Internet y en la documentación como arreglar este error y no encontré nada útil. Temía atascarme mucho tiempo por culpa de este error y no poder seguir con el curso pero ya está todo en perfecto Estado. Muchas gracias, Diana 🙏🏻

Cesar González Caballero

student•

.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: absolute;

flex-direction: column;

bottom: 0;

width: 100vw;

background-color: white;

box-shadow: 0 -8px 16px #e5e5e5;

border-radius: 24px;

}

.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;

}

</style>

Cesar González Caballero

student•

header {

display: flex;

justify-content: space-around;

align-items: center;

width: 100vw;

}

img,

span {

width: 48px;

}

h1 {

font-size: 1.4rem;

color: var(--brand-blue);

}

h1 span {

color: var(--brand-green);

}

</style>

fabio andres zamora osorio

student•

¿Como dividir el diseño de figma para identificar la cantidad de componentes que se deben crear y cuales son los componentes padre e hijos?

Diana Martinez

student•

Eso solo te lo va dando la experiencia, en mi experiencia y personalmente, he aprendido a dividir los componentes en:

Blocks: elementos indivisibles, como botones, inputs, imágenes, etc...
Groups: conjuntos simples de blocks, como headers, button groups, inputs complejos (ej. input icon, input search, input autocomplete), etc...
Widgets: unidades de lógica de negocio, formados por blocks, groups y hasta otros widgets, como formulario de login, carrito de compra, input de código de verificación, tabs, input chat, etc.
Layout Components: componentes reutilizables que ayudan al acomodo de elementos en pantalla, para hacer los Layouts más simples, por ejemplo, sistema de columnas, grid, slider, covers, lógica de modals, alerts y notifications (no su UI), etc.
Layouts: acomodo de elementos en pantalla reutilizable, como layout de blog, calendario, tabla, resultados de búsqueda, panel de administración, etc.
Pages: son las vistas finales armadas de todas las partes anteriores, aquí conecto con JS la lógica de negocios, y así logro separar la lógica de los componentes o UI, de las reglas de negocio, y armar nuevas vistas con partes reutilizables.

Sin embargo, es un criterio muy personal, puede haber muchas formas de pensar en esto.

Diana Martinez

student•

Hay un principio muy simple que puedes seguir: Un componente debe de encargarse de sus propias cosas, no de las de sus padres, no de las de sus hijos, y si aun así hace demasiadas cosas, tal vez es hora de dividirlo en subcomponentes, aunque estos subcomponentes solo se usen para armar este componente.

Hay que pensar mucho en la reusabilidad, si el componente no contiene a otros, debe ser más reusable y agnóstico, a medida que contiene a otros que contienen a otros, va tomando la lógica de negocios de la aplicación.

Por ejemplo, Componente base: un botón, un dropdown. Ambos son simples y agnósticos al negocio.

Componente de alto nivel: carrito de compra. Incluye lógica de negocio en su definición y código.

Hacer un componente base muy complejo, implicaría poca reusabilidad, mucho código que mantener.

Hacer un componente de alto nivel muy reutilizable, podría hacer que nuestras aplicaciones sean demasiado genéricas con experiencias de usuario muy pobres, por ejemplo, poner un simple textarea con capacidad de leer Markdown (altamente reutilizable), es mucho más pobre en UX que un editor como Google Docs (más específico).

josué valencia

student•

cada vez me gusta menos Vue.js

Vengo del jsx de react.

siento que el framework de vue, obliga al desarrollador a seguir un estilo de programacion orientado a html.

si vienes del mundo de html o de template engines te resulta familiar.

pero la verdad es que cada vez vemo mas framework related en la UI, cosas como slot por ejemplo. yo esperaba solo colocar mi componente (header) y listo, pero tengo que pasar por el boilerplate de hacer un slot.

Mario Alejandro Macias Ortiz

student•

Pues me agradaría una opción tipo youtube de me gusta o no me gusta, porque hay cosas muy confusas y no es por falta de conocimiento, sino por el ritmo y los brincos entres explicación y explicación.

Jose Alejandro Pantoja Giraldo

student•

++npm run lint ++ te solucionará muchos errores, yo por mi parte en el package.json cambie el run serve por: **"serve": "npm run lint && npm run lint --fix && vue-cli-service serve", ** de esta manera si tengo errores, solo vuelvo a ejecutar el run serve y listo

<style scoped>
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}
img,
span {
  width: 48px;
}
h1 {
  font-size: 1.4rem;
  color: var(--brand-blue);
}
h1 span {
  color: var(--brand-green);
}
</style>

<<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: absolute;
  flex-direction: column;
  bottom: 0;
  width: 100vw;
  background-color: white;
  box-shadow: 0 -8px 16px #e5e5e5;
  border-radius: 24px;
}
.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;
}
</style>> 

<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: absolute;
  flex-direction: column;
  bottom: 0;
  width: 100vw;
  background-color: white;
  box-shadow: 0 -8px 16px #e5e5e5;
  border-radius: 24px;
}
.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;
}
</style>

// Codigo de HomeComp
<template>
  <LayoutComp>
    <template #header>
      <HeaderComp></HeaderComp>
    </template>
  </LayoutComp>
</template>

<script>
import { LayoutComp } from "./LayoutComp.vue";
import { HeaderComp } from "./HeaderComp.vue";

export default {
  components: {
    LayoutComp,
    HeaderComp,
  },
};
</script>

//Codigo de LayoutComp
<template>
  <div class="header">
    <slot name="header"></slot>
  </div>
</template>

Header y contenido

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?