Fundamentos de componentes

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.

• Documentación de Vue.js 3

• CheatSheet Vue.js 3

• Ruta de aprendizaje Frontend con Vue.js Platzi

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.

Esta clase sobre componentes es una joyita 😃

https://platzi.com/clases/2239-frameworks-javascript/36153-que-son-los-componentes/

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 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 “mayor” (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 💚