Creación y Gestión de Componentes VUE en Proyectos Web

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:02

Creación y Gestión de Componentes VUE en Proyectos Web

Curso Básico de Vue.js 2

Clase 28 de 38

Clase 28 / 38

Comentarios (51)51 comentarios

Sergio Bernal

Hace 6 años

El código para empezar el componente

<template>
   <header class="shadow w-screen">
       <nav>
           <nav class="flex items-center justify-between flex-wrap bg-green-400 p-6">
               <div class="flex items-center flex-shrink-0 text-white mr-6">
                   <span class="font-semibold text-xl tracking-tight">PlatziExchange</span>
               </div>
               <div class="hidden sm:block w-full blok flex-grow lg:flex lg:items-center lg:wauto">
                   <div class="text-sm lg:flex-grow"></div>
               </div>
           </nav>
       </nav>
    </header> 
</template>

KARINA DAVILA

Hace 6 años

Gracias!

Javier Mendoza

Hace 6 años

Gracias

Michael Garcia

Hace 7 años

Si a alguien no le funciona el Prettier, es cuestión de que se metan a los setting de Visual Studio y busquen Format On Save, y activen la opción...

Moisés Cedeño

Hace 7 años

Muchas gracias compañero, TREMENDO DATO.

Roberto Shirásago Domínguez

Hace 6 años

Gran aporte, no me estaban funcionando ninguno de los puglins jaja, ya al menos uno

Ivan López

Hace 7 años

Algo que esta muy genial, es que si tienes algún error en el template, con npm run lint, tus errores son corregidos automáticamente

José Barrios Pulido

Hace 7 años

Nota: Prettier corrige los estilos siempre y cuando tengas configurado en el vscode esta opción, Format On Save : True o dar visto bueno

Nacho Anaya

Profesor

Hace 7 años

Tambien podes hacerlo usando el comando npm run lint

Ricardo Boraure

Hace 6 años

SI prettier no te formatea el codigo cuando guardas y usas VS Code, puedes hacer lo siguiente:

1)Pulsa "CTRL + ," para abrir la configuracion de VS Code. 2)Ve a la parte de format. 3) luego pulsa formatear cuando se guarda,.

Y listo, espero les sirva.

Wilson Orlando Capacho Carmona

Hace 6 años

Compañero a mi me dio un problema despues de instalar tailwind...me podrias ayudar

Ricardo Boraure

Hace 6 años

Cuentame

Iván Nieves Ardila

Hace 7 años

Para que Prettier actué automáticamente cuando se le de guardar

Patrick Jeremy Rodriguez Sandoval

Hace 5 años

Para los que presenten el siguiente error: "error Delete ␍ prettier/prettier", solo cambien la linea de secuencia en visual studio de CRLF a LF.

Ameth Ordoñez Erazo

Hace 4 años

Una hora peleando con ese error... Gracias bro!

Leniel Luzardo

Hace 7 años

Esta es la parte del curso que esta esperando!👏🏼👏🏼👏🏼

Gonzalo Pimentel

Hace 6 años

Si quieren trabajar con ESLINT y PRETTIER sin que tengan conflictos compartidos, agregen esto a su configuración de .eslintrc.js:

Jose L. Figueroa

Hace 5 años

Primeros Componentes

La única regulación al momento de crear nuevos componentes es que éstos no pueden tener nombres de componentes ya existentes, como pueden ser: Header o div, es necesario integrar nombres custom para que los componentes no se planchen con los componentes ya existentes en HTML.

Se pueden tener componentes que no tienen el tag script, es totalmente válido, es posible tener componentes que solamente tienen viste, la parte de HTML, pero que no tienen la parte de estilos ni la parte de la lógica.

Al usar la nomenclatura de propiedades completa nos permite validar el tipo, al definir un valor default, para un array o un objeto es necesario definir una función que devuelva un array(para un array) o un objeto(para un objeto). En cambio para un valor nativo como un boolean, simplemente se puede poner true o string.

La estructura natural del HTML o del DOM se da cuando combinamos elementos a partir de una estructura de árbol, una estructura jerárquica.

Carlos Eduardo Gomez García

Hace 6 años

Me gusta esta forma de trabajar con Vue, y creo que aquí se puede apreciar una de las grandes ventajas de Vue, que es que puedes copiarte algún componente de internet (En este caso de la sección de recursos) y pegarlos tal cual en tu proyecto y va a funcionar, es increíble!

Erick Daniel Pérez Mata

Hace 7 años

¿Solo VueJS acepta '@' para las rutas dinámicas?

Manuel Ojeda

Hace 7 años

El uso del @ es un alias, es decir, webpack lo reconoce como una dirección en especifico. ¿Para qué te sirve? Es de ayuda para no tener que estar realizando tantas llamadas a direcciones relativas del tipo ../../../la/ruta/al/componente

Saludos

José Sebastián Garcia

Hace 6 años

Dado que no pude bajar tailwincss, para no atrasarme adapté el ejercicio a bootstrap.

jonathan sanchez

Hace 7 años

Hemos aprendido a crear componentes y a incluirlos dentro de otros componentes.

es recomendable el uso de prefijos para los nombres de los componentes para no tener errores.

Julio César Rodríguez

Hace 6 años

Hola, tengo dudas sobre el icono

Siempre hay que importar todo ese gigante párrafo de código para subir una imagen?
De dónde saco ese párrafo para crear mi propio icono?

Carlos Eduardo Gomez García

Hace 6 años

¡Hola!, no, no siempre. Ese texto es una imagen codificada en base64 que tenía el profesor por ahí, tú puedes importar tus propias imágenes usando la etiqueta <img src="" /> de toda la vida de HTML. Pero si quieres seguir el curso con el profesor usando la misma imagen, puedes mirar en el apartado de recursos y enlaces donde puedes encontrar ese mismo texto que tenía el profesor para que tú igual lo uses, no te preocupes, es solo una imagen codificada, pero lo más común es que siempre trabajes con la etiqueta <img> :D

Jaime Ortiz

Hace 6 años

Todo lo explicado aca lo busco en la documentacion de "vue" o de "vue cli"?

Massimo Di Berardino

Hace 6 años

Hola @jaalorsa519, te recomiendo apoyarte de ambas documentaciones :)

Jefferson Andres Espejo Goez

Hace 6 años

La documentación de Vue CLI está enfocada principalmente al entorno de desarrollo necesario para que trabajes tus aplicaciones con Vue, mientras que la documentación oficial de Vue es para que aprendas lo concerniente al framework y como se trabaja con éste. Como te dijo el compañero, lo ideal sería que te apoyarás en ambas documentaciones y puedas ir migrando de la versión 2 a la versión 3 :D #NuncaParesDeAprender

Diego Andrés Rojas González

Hace 7 años

Que aplicaciones me permite crear imágenes svg de forma intuitiva? de seguro hay online o de escritorio... pero desconozco este tema

Gabriel De Andrade

Hace 7 años

Acá hay unas cuantas gratuitas y Illustrator también es genial para eso :D

Juan Ignacio Echenique Olsina

Hace 6 años

Una duda cada vez que realizo un cambio debo volver a escribir sudo npm run serve para ver los cambios en el codigo o existe una forma mas facil de hacer esto?

Brayan Olarte

Hace 6 años

No solamente levantas tu server una vez y cada vez que vayas guardando si tienes todo correctamente configurado el recarga la web por ti.

Jose Luis Barboza Gonzales

Hace 6 años

en resumen se crea los componentes PxHeader, PxAssetsTable y PxIcon este ultimo esta siendo importado dentro de PxHeader los demas estan siendo llamados en App.vue

Daniel Moreno

Hace 7 años

Pregunta tonta.. por que el pxicon no necesita tag de script con su export?

Gabriel De Andrade

Hace 7 años

Hola! Porque este componente no tiene lógica, es sólo una estructura de HTML para integrarla dentro de tu aplicación de manera modular :D

Daniel Moreno

Hace 7 años

Gracias... no me quedaba claro porque el pxassetstable tenia script si tampoco tenia pero ya entendi, es porque despues va a recibir, fue un brainfart jajaja

Recursos

¿Cómo estructurar nuestros componentes en Vue.js?

El universo del desarrollo web evoluciona constantemente, y una de las tecnologías que sigue ganando terreno es Vue.js. Al abordar la creación de componentes en Vue, es esencial aprender a organizarlos de manera eficaz para maximizar su rendimiento y mantenimiento. En esta guía, exploraremos cómo estructurar proyectos con componentes en Vue, combinando conceptos claves previamente discutidos.

¿Cómo comenzamos limpiando nuestro proyecto?

Comenzar un proyecto ordenado es la base para que el desarrollo sea más fluido. A menudo, al crear componentes en Vue, es beneficioso limpiar el proyecto de elementos innecesarios:

Reemplazo de etiquetas: Cambia etiquetas no semánticas como <Edit> a algo más claro como <main>.
Eliminación de elementos no utilizados: Borra imágenes y referencias a componentes que ya no forman parte de tu HTML.
Configuraciones útiles del editor: Herramientas como Prettier pueden asegurarse de que el código siga un estilo uniforme sin preocuparse por la individualidad de cada desarrollador.

¿Cómo creamos nuestro primer componente?

Crear un componente en Vue es un proceso que puede ser sencillo o detallado, según tus necesidades. Aquí te mostramos cómo hacerlo:

Nomenclatura coherente: Usa prefijos como PX para tus componentes, permitiendo así identificarlos fácilmente.
Evita conflictos con elementos HTML existentes: Asegúrate de elegir nombres personalizados.

Ejemplo de código para un componente Vue:

// pxHeader.vue
<template>
  <header>
    <div class="py-6 text-center bg-green-500">
      <p class="text-white font-bold sm:block">Platzi Strings</p>
    </div>
  </header>
</template>

<script>
export default {
  name: 'PXHeader'
}
</script>

¿Cómo integramos componentes?

Una vez creados tus componentes, el paso siguiente es saber cómo integrarlos eficazmente en tu aplicación:

Importación de componentes: Usa el método de importación para añadir el componente PXHeader a tu archivo App.vue.
Uso correcto del template: Asegúrate de que tus componentes estén correctamente anidados en el template HTML.

// App.vue
<template>
  <div id="app">
    <PXHeader />
    <!-- Otros componentes -->
  </div>
</template>

<script>
import PXHeader from './components/pxHeader.vue';

export default {
  name: 'App',
  components: {
    PXHeader
  }
}
</script>

¿Cómo aprovechamos utilidades CSS como Tailwind?

Vue se complementa perfectamente con herramientas CSS como Tailwind, facilitando la aplicación de estilos responsivos sin complicaciones:

Clases de Tailwind: Utiliza clases como bg-green, text-white, py-6 para estilos personalizados y fácilmente manejables.
Breakpoints responsivos: Implementa breakpoints como sm:block para un diseño adaptativo que sigue el principio "mobile-first".

¿Cómo crear componentes SVG y tablas?

La separación de lógica y vista es crítica al crear componentes complejos, como iconos SVG o tablas dinámicas:

Componentes SVG: Guarda SVGs largos y complicados en archivos individuales para mantener tu código limpio.
Creación de tablas: Las tablas dinámicas pueden mostrar datos variables y deben estar preparadas para recibir propiedades como assets para propagar información.

// pxBaseTable.vue
<template>
  <table>
    <!-- Añade encabezados y cuerpos de tabla -->
  </table>
</template>

<script>
export default {
  name: 'PXBaseTable',
  props: {
    assets: {
      type: Array,
      default: () => []
    }
  }
}
</script>

Al seguir estas directrices en la creación y organización de componentes en Vue.js, no sólo optimizas el rendimiento y el diseño de tus aplicaciones, sino que también facilitas el mantenimiento y la escalabilidad a largo plazo. El aprendizaje constante y la práctica son cruciales para dominar estas habilidades, así que ¡sigue experimentando y mejorando!

<template>
   <header class="shadow w-screen">
       <nav>
           <nav class="flex items-center justify-between flex-wrap bg-green-400 p-6">
               <div class="flex items-center flex-shrink-0 text-white mr-6">
                   <span class="font-semibold text-xl tracking-tight">PlatziExchange</span>
               </div>
               <div class="hidden sm:block w-full blok flex-grow lg:flex lg:items-center lg:wauto">
                   <div class="text-sm lg:flex-grow"></div>
               </div>
           </nav>
       </nav>
    </header> 
</template>

Resumen

¿Cómo estructurar nuestros componentes en Vue.js?

¿Cómo comenzamos limpiando nuestro proyecto?

Comenzar un proyecto ordenado es la base para que el desarrollo sea más fluido. A menudo, al crear componentes en Vue, es beneficioso limpiar el proyecto de elementos innecesarios:

Reemplazo de etiquetas: Cambia etiquetas no semánticas como <Edit> a algo más claro como <main>.
Eliminación de elementos no utilizados: Borra imágenes y referencias a componentes que ya no forman parte de tu HTML.
Configuraciones útiles del editor: Herramientas como Prettier pueden asegurarse de que el código siga un estilo uniforme sin preocuparse por la individualidad de cada desarrollador.

¿Cómo creamos nuestro primer componente?

Crear un componente en Vue es un proceso que puede ser sencillo o detallado, según tus necesidades. Aquí te mostramos cómo hacerlo:

Nomenclatura coherente: Usa prefijos como PX para tus componentes, permitiendo así identificarlos fácilmente.
Evita conflictos con elementos HTML existentes: Asegúrate de elegir nombres personalizados.

Ejemplo de código para un componente Vue:

// pxHeader.vue
<template>
  <header>
    <div class="py-6 text-center bg-green-500">
      <p class="text-white font-bold sm:block">Platzi Strings</p>
    </div>
  </header>
</template>

<script>
export default {
  name: 'PXHeader'
}
</script>

¿Cómo integramos componentes?

Una vez creados tus componentes, el paso siguiente es saber cómo integrarlos eficazmente en tu aplicación:

Importación de componentes: Usa el método de importación para añadir el componente PXHeader a tu archivo App.vue.
Uso correcto del template: Asegúrate de que tus componentes estén correctamente anidados en el template HTML.

// App.vue
<template>
  <div id="app">
    <PXHeader />
    <!-- Otros componentes -->
  </div>
</template>

<script>
import PXHeader from './components/pxHeader.vue';

export default {
  name: 'App',
  components: {
    PXHeader
  }
}
</script>

¿Cómo aprovechamos utilidades CSS como Tailwind?

Vue se complementa perfectamente con herramientas CSS como Tailwind, facilitando la aplicación de estilos responsivos sin complicaciones:

Clases de Tailwind: Utiliza clases como bg-green, text-white, py-6 para estilos personalizados y fácilmente manejables.
Breakpoints responsivos: Implementa breakpoints como sm:block para un diseño adaptativo que sigue el principio "mobile-first".

¿Cómo crear componentes SVG y tablas?

La separación de lógica y vista es crítica al crear componentes complejos, como iconos SVG o tablas dinámicas:

Componentes SVG: Guarda SVGs largos y complicados en archivos individuales para mantener tu código limpio.
Creación de tablas: Las tablas dinámicas pueden mostrar datos variables y deben estar preparadas para recibir propiedades como assets para propagar información.

// pxBaseTable.vue
<template>
  <table>
    <!-- Añade encabezados y cuerpos de tabla -->
  </table>
</template>

<script>
export default {
  name: 'PXBaseTable',
  props: {
    assets: {
      type: Array,
      default: () => []
    }
  }
}
</script>

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Creación y Gestión de Componentes VUE en Proyectos Web