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

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:001:23

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

Curso Básico de Vue.js 2

Clase 21 de 38

Clase 21 / 38

Recursos

¿Qué son los componentes difíciles y cómo dominarlos?

Dominar los componentes difíciles es un paso crucial para cualquier desarrollador que trabaje con frameworks modernos de JavaScript, como Vue.js. Los componentes son fundamentales para crear un código más estructurado, semántico y fácil de mantener. A continuación, exploramos algunos de los conceptos esenciales que te permitirán dominar los componentes complejos y utilizarlos de manera eficaz en tus proyectos.

¿Cuál es el rol de las funciones de componentes?

Las funciones de componentes te permiten crear tus propios elementos HTML personalizados. Son esenciales para agrupar contenido y código en componentes comunes. Esto facilita la reutilización de código a lo largo de tu aplicación, promoviendo un código limpio y fácil de gestionar.

¿Cómo se comunican el componente padre e hijo?

La comunicación entre componentes padre e hijo se realiza a través de propiedades (props). El componente padre puede enviar información al componente hijo mediante estas propiedades. Sin embargo, es crucial recordar que el componente hijo no debe modificar directamente estas propiedades. En su lugar, debe enviar eventos que permitan comunicar cambios al componente padre.

¿Qué función tienen los slots en la distribución de contenido?

Los slots ofrecen flexibilidad en la incorporación de contenido desde el componente padre al componente hijo. Permiten insertar HTML en tiempo real, lo que amplía las posibilidades de distribución de contenido en tu aplicación. Esto es útil para crear componentes versátiles que puedan adaptarse a diferentes necesidades sin modificar el código del componente hijo.

¿Por qué es importante entender el ciclo de vida de los componentes?

Cada componente tiene un ciclo de vida que se inicia desde su creación y finaliza con su destrucción. Comprender este ciclo es vital, ya que te brinda la oportunidad de ejecutar código en diferentes etapas de la vida de un componente. Por ejemplo, puedes inicializar datos cuando el componente se monta, o limpiar recursos cuando se desmonta.

Directivas y el sistema de componentes: un binomio poderoso

El sistema de componentes se complementa perfectamente con las directivas. Las directivas proporcionan una manera declarativa de manipular el DOM y manejar comportamiento dinámico, mientras que el sistema de componentes permite estructurar tu aplicación de forma modular.

¿Cómo benefician las directivas y componentes a las aplicaciones web?

Código declarativo: Facilitan la creación de aplicaciones mediante la manipulación declarativa del DOM.
Modularidad: Los componentes fomentan la división del código en módulos reutilizables.
Mantenimiento: Hace que el código sea más fácil de mantener al reducir duplicidades y mejorar la estructura.

¿Qué podemos lograr aplicando estos conceptos profesionalmente?

Ahora que entendemos cómo las directivas y los componentes trabajan juntos, podemos usarlos para desarrollar aplicaciones web de calidad profesional. Al integrar el sistema de componentes con la renderización declarativa, es posible construir aplicaciones robustas y escalables.

¿Cómo comenzar con un proyecto profesional?

Un proyecto ideal para poner en práctica estos conceptos es Platzi CMS. La combinación de un sistema de componentes y renderización declarativa te permitirá crear aplicaciones intuitivas y dinámicas. En este contexto, prácticas como la optimización de la carga de componentes y el manejo eficiente de la comunicación entre ellos harán una gran diferencia.

¡Sigue adelante en tu aprendizaje de componentes y directivas! Con estos conocimientos, estás en el camino correcto para crear aplicaciones web impresionantes y robustas.

José Sebastián Garcia

Hace 6 años

Paso mi resumen desde la clase 1 hasta la actual:

Las propiedades declaradas en el scope principal de Vue, se pueden usar como cuerpo de un elemento: <elemento>{{dataReturnEnVue}}</elemento>

Si pretendo usar el dataReturnEnVue dentro de atributos aqui es donde entra: v-bind:[atributo] <elemento v-bind:[atributo]="[valorReturnVue]">

Las directivas se usan como atributos: <elemento v-if="condicion"> <elemento v-else-if="condicion"> <elemento v-else>

Esto muestra un elemento si la condicion retorna TRUE <elemento v-show="condicion">

La diferencia en v-if y v-show es que v-if remueve el objeto del DOM, v-show por el contrario simplemente oculta con display.

Nos permite renderizar listas/arrays: array valores:

<ul> <li v-for="(p,i) in prices" v-bind:key="p"> {{i}} - {{p}} </li> </ul> array objetos: <ul> <li v-for="(p, i) in priceswd" v-bind:key="p.day"> {{i}} - {{p.day}} - {{p.value}} </li> </ul>

onclick: v-on determina el evento, luego del : se pone el evento y el método que ejecutara ese evento. Se puede usar el ternary para cambiar texto en el mismo elemento. <span v-on:click="toggleShowPrices"> {{showPrices ? 'Hide prices' : 'Show prices'}} </span>

directiva v-model: linkea las cosas que escribe un usuario con las propiedades definidas dentro de data. Two-way data binding, se puede actualizar desde la interfaz o desde las propiedades en segundo plano, esos cambios se verán reflejados en el elemento donde hayamos especificado el v-model y la propiedad correspondiente.

Componentes: En caracter declarativo se ubican fuera del scope de new Vue({}); ya que para crear componentes reutilizables no es necesario instanciar Vue. Se usa: Vue.component('[nombre del elemento]',{//lo mismo que se usa en la instancia de vue con la diferencia que se puede añadir un template haciendo uso de string literals, dentro se escribe un unico elemento padre(root) y los hijos dentro del mismo, esto se hace en hmtl y se puede combinar con directivas vue.});

slots: Permiten extender la informacion de un contenedor sobretodo de contenido de un padre hacia un hijo. Se extiende la distribucion de contenido. en js se usan dentro de template literals. <slot name="[nombre del slot]"></slot> podemos tener tantos como queramos. En html se invoca dentro del componente, haciendo uso de un elemento propio de Vue llamado "template" <Template v-slot:[nombre del slot]>[Contenido]</Template>

en javascript: new Vue({ el:'[Selector]', data(){//informacion que queremos mostrar}, methods:{todos los métodos que usará vue en la vista}, computed:{ //funciones que del otro lado en el bind se llaman como simples datos/propiedades. Se calculan en tiempo real en base a otras propiedades declaradas en data. }, watch:{ //se dispara cada vez que cambia el valor de una propiedad. los metodos que se declaran reciben un newValue y un oldValue en ese orden. }, created:{}, mounted:{}, methods:{} });

created y mounted forman parte del ciclo de vida de los scopes en vue, mas info en la documentacion del framework. Son eventos que nos podemos atachar si necesitamos realizar alguna acción.

Comentarios (12)12 comentarios

Emmanuel Rodríguez

Hace 7 años

Desde Vue Mastery 👊😎

Roberto Shirásago Domínguez

Solo nos faltan las libraries! :O , por ahi hay una muy famosa que se llama Vuex (si no mal recuerdo). Gracias por la imagen, la guardare!!! :D

Daniel Martin Garcia Muñoz

😊 Nice

Juan Ramirez

Resumen de el modulo de los componentes:

Un componente se crea gracias a la función Vue.component() esta recibe 2 parámetros, el nombre del componente, y el objeto con la configuración del componente.
Propiedades nuevas en los componentes: Template => Aquí va todo el html que crea el componente. Props => Permite traer información del componente padre.
La forma de enviar información del componente padre, al componente hijo es a través de props.
La forma de enviar información del componente hijo, al componente padre es a través de eventos.
El componente hijo nunca debe modificar las propiedades que le pasa el componente padre.
Los slots, permiten que un componente padre le inyecte HTML en tiempo real a u componente hijo.
Y por ultimo que los componentes tienen un ciclo de Vida (Lifecycle), Que nos permite conocer como se crea, actualiza y destruye un componente; y así poder encontrar el punto en el que queremos aplicar una acción

jonathan sanchez

hasta ahora hemos aprendido lo basico para el manejo de vue con rendering declarativo y a crear y manejar componentes.

Me gusta el curso y creo q ahora empieza lo bueno para ser profesionales en este FRAMEWORK DE JAVASCRIPT.

David Campos

Temas vistos hasta ahora:

Vue.component: Para crear componentes reutilizables.
Props: Para enviar información al componente hijo.
Events: Para que el componente hijo se comunique con el componente padre.
Slots: Insertar código HTML en tiempo real enviándolo de padre a hijo.
Ciclo de vida: Funciones que permiten ejecutar código conforme el componente pasa por este ciclo.

Abner Daniel Saavedra Farías

Muy bueno de verdad muchas gracias.

Me gustaría y creo conveniente dejar resúmenes y conceptos en recursos digitales como PDF demás. Una especie de guía.

De resto seguimos a la práctica (Y)

Carlos Eduardo Gomez García

Me está encantando Vue, sin embargo, no lo veo muy práctico usarlo en el navegador como una librería que renderiza y ejecuta la aplicación durante la carga de la página, no se si en este curso lleguemos a tocar Vue CLI, pero sin duda me gustaría más ver todo esto con Vue CLI para compilar los componentes:D

Edgar Ramón González Contreras

Hace 5 años

Hasta ahora todo al 100

Jose Daniel Barría Reyes

Muchas gracias por tanto!

Usuario anónimo

User

¿porqué en la documentacion oficial o en vuemastery cuando se declara data lo hace como objeto y no como una función?

en los videos pasados enseñan que si o si es "data" una función

data () : function {}

pero en la documentacion oficial esta como solo data:

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Alberto D. Sosa

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
 // Es lo mismo que...
  data () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Guillermo Pedro Cuneo

Eso puntualmente lo aclara sobre el final del vídeo "comunicación entre componente: eventos" Lo que dice es: " Si en lugar de una función tuviésemos un objeto no podríamos tener una referencia aislada para cada componente. Cada componente tiene su propio estado y cuando se modifica el estado de un componente por mas que sea el mismo tipo de componente no afecta al otro."

Sebastian Heredia

¡Vamos por el reto! :)

DEL RIO JUNCA JUAN CARLOS

Problemas Técnicos con la clase 21 del curso Vue Básico, Clase con nombre "Antes de continuar, ¡un repaso!" . Se detiene la transmisión y no avanza casi en la mitad de la clase.

Daniel Bretado Reyes

Cambia el servidor, en el reproductor hay un botón para cambiarlo, suele pasar en algunos videos pero se soluciona de esa forma.

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

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