Fundamentos de componentes

2/23
Recursos

Aportes 19

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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

Amor para Vue 鉂わ笍

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

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

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.

Llegu茅 justo a tiempo. 隆Genial!

Excelente introducci贸n a los componentes

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

Patron MVVM

Intefaz de un compnente

Estado de un componente

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)

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

Nos hacia falta una nueva saga de Vue 鉂わ笍

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

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.