Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
12H
56M
54S

Fundamentos de componentes

2/23
Recursos

Aportes 41

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Fundamentos de componentes

Los componentes son una funcionalidad importante que tiene Vue. Se basan en las especificaciones de web components APIs. Permiten modularizar mi aplicaci贸n en diferentes pedazos de HTML, JavaScript y CSS para tener un c贸digo m谩s legible y sem谩ntico. Es decir, cada componente puede ser utilizado a lo largo del proyecto, tiene todo lo que necesita para existir, tiene su l贸gica, tiene dise帽o y tiene estructura.

Cuando trabajamos con HTML y el DOM siempre tenemos una estructura de 谩rbol, es decir, un estructura jer谩rquica DOM. Tenemos un componente principal y luego tenemos componentes hijos que representan contenedores con diferente tipo de contenido. Adem谩s, podemos tener otros componentes hijos, es decir, cada uno tambi茅n tiene su propios elementos HTML.

Two Way Data Binding

Two Way Data Binding es un patr贸n MVVM (model - view - view - model) donde se enlazan dos elementos en dos direcciones (cuando cambia uno cambia el otro). Sirve para tener los datos sincronizados con el DOM sin hacer esfuerzos adicionales.

Vista

Aqu铆 tenemos el HTML. La vista se encarga de decirle al estado que hay cambios, a lo cual el estado va a reaccionar y mandar una nueva vista.

Estado

Aqu铆 tenemos nuestros datos de JavaScript. El estado se encarga de decirle a la vista c贸mo y cuando tiene que compilar y cu谩l es el resultado que se tiene que lograr, esto lo hace con una funci贸n que se llama render.

Usuario

Es el que introduce cambios en la vista.

Amor para Vue 鉂わ笍

Les dejo esta documentaci贸n por si desean profundizar en el tema de los componentes.

Para ser mi primer acercamiento a un framework siento que esta muy bien explicado desde sus fundamentos y hasta ahora he entendido gran parte.

Me est谩 gustando mucho este curso!
Ya era hora de darle amor a Vue en Platzi.

Partes de un componente


Vista: parte visual del componente, por ejemplo la creacion de un bot贸n

Estado: Estado interno del componente (Habilitado y Deshabilitado)

Interfaz: Es la forma en que el resto del sistema interactua con el componente (Al dar click, por ejemplo)

Esta explicaci贸n tambi茅n aplica para los estados de React.

Fundamentos de componentes

Los componentes son c贸digo aislados y abstraidos que se comunican con una interfaz.

Hacer esto nos permite tener un c贸digo organizado, f谩cil de mantener y reutilizar.

Partes de un componente:

  • Vista -> Es la parte visual del componente con la que el usuario interact煤a.
  • Estado -> Es el estado interno del componente.
  • Interfaz -> Es la forma en que el resto del sistema interact煤a con el componente.

Patr贸n MVVM:

View -> input -> ViewModel -> Model -> ViewModel -> state -> View

Vue tiene Two-way data binding, el modelo y la vista est谩n sincronizados.

Me gust贸 la clase y la manera clara que la profe abord贸 los temas. Denota conocimiento de pedagog铆a.

yo trabajo angular, y esto aprendiendo vue para un proyecto, haber como es y empezar a trabajarlo

Les comparto el mejor canal de YouTube de Vue Mater
https://www.youtube.com/c/VueMastery

increible esta clase!!! simplemente incirelbe!!! despues de tanto estudio, esto se pone demasiado interesante!!!

驴Un ejemplo de componentes podr铆an ser los microservicios, y la interfaz es un API?

super explicacion profe, cada vez me gusta mas vue

muy emocionado por aprender vue

Soy backend, y es la primera vez que aprender algo del front me genera emoci贸n. Gracias Diana

Wow! fui iluminado! me encant贸 esta clase, naciste para ense帽ar鈥

Partes de un componente: Vista

Partes de un componente: Estado

Nos hacia falta una nueva saga de Vue 鉂わ笍

Excelente, apenas me estoy adentrando y va genial y entendible!!

Intefaz de un compnente

Patron MVVM

Estado de un componente

Muy buena clase!!!

que exelente explicacion sobre los componentes馃挌

Llegu茅 justo a tiempo. 隆Genial!

Excelente introducci贸n a los componentes

No se si me pasa solo a mi? pero los videos desde que cambiaron de interfaz se entrecortan :( no puedo verlos con fluidez.

No hubiera sido tan caotico con web components crear esos componentes.

exelente clase 馃挌

Componente: Abstraer todas las partes de un software, encapsulados o aislados en forma de componentes que interact煤an entre s铆 por medio de una interfaz.

Vista: Es la parte visual con el que el usuario interact煤a.

Estado: El estado interno del componnete.

Interfaz: La manera en que interact煤an los componentes con el sistema y viceversa.

Patr贸n MVVM: Separar la interfaz del usuario y la l贸gica de negocio

Un componente a nivel general, es una parte funcional que cumple un objetivo en especifico, ejemplo un bot贸n HTML es un componente, un sistema grande digamos una Base de Datos es un componente tambi茅n (objetivo almacenar y proveer datos), es parte de un sistema, en si un sistema esta conformado por componentes e interfaces (interfaces para la comunicaci贸n entre componentes)

Si lo vemos en paginas web, un componente seria un bot贸n, otro un input tipo text y estos dos pueden estar dentro de un componente 鈥渕ayor鈥 (por decirlo de alguna forma) que es un form este conjunto seria la pagina web.

ya perdiendo un poco la cabeza, nosotros seriamos un componente jaja, por que generamos la acci贸n de presionar el bot贸n, y as铆 se vera el funcionamiento completo del sistema

disculpas se me fue la cabeza, es que en si, un componente es algo muy general, yo simplemente lo veo es como un objeto que provee una interfaz, que cumple un objetivo y que se puede reusar.

Se apunta mucho a la idea de modularidad. S煤per, armando plataformas y sistemas con componentes como piezas de Lego.

Esto aboga mucho por la personalizaci贸n, as铆 como por la funcionalidad.

Partes de un componente: Interfaz (de usuario)

Empiezo mi camino en aprender este framework que se que me cambiara la vida y me dar谩 la oportunidad de mi primer empleo en Tech.

En el pasado intent茅 aprender frontend pero se me hac铆a confuso. Si hubiera escuchado del patr贸n mvvm antes se me hubiera hecho mucho m谩s sencillo. Grande diana!!

Muy emocionado con Vue.js, me gusta que la profe es muy tesa y explica muy bien.

馃殌 Empezando Vue.js con todo el amor 馃挌