Phenquestions
Vue.js es un marco javascript progresivo, que se utiliza para crear UI (interfaces de usuario) y SPA (aplicaciones de una sola página). Podemos comenzar a construir aplicaciones web en Vue.js con conocimientos básicos de HTML, CSS y Javascript. Vue.js se crea combinando las mejores características de Angular y React Frameworks ya existentes. A los desarrolladores les encanta codificar y sentir libertad y comodidad al crear aplicaciones en Vue.js.
Este enfoque basado en componentes se inspiró y seleccionó básicamente de ReactJS. Escribimos código en forma de componentes para que podamos importar ese componente y reutilizarlo donde lo necesitemos. Vue.js ofrece un componente de un solo archivo, lo que lo convierte en un código poco acoplado y reutilizable.
Vue.js ofrece el mejor enfoque basado en componentes, como lo que necesite un desarrollador; lo puede encontrar en un solo .archivo vue. Los desarrolladores se sienten tan cómodos y a gusto cuando no tienen que preocuparse por la estructura adicional de un componente o cuidarla.
En este artículo, veremos el componente de un solo archivo, que tiene una .extensión vue. Entonces, echemos un vistazo a un ejemplo de componente de Vue muy simple y comprendamos.
message Mundo
Este es un ejemplo muy simple y básico de un componente de Vue. En el que podemos ver que el código está dividido en tres capas. Esta sintaxis de tres capas es la mejor parte de Vue.js. Satisface la separación de preocupaciones pero estando en un solo .archivo vue. Tenemos nuestra plantilla (HTML), lógica en Javascript y estilo dentro de un componente.
- Plantilla
- Texto
- Estilo
Plantilla
En esta etiqueta de plantilla, escribimos nuestro código HTML. Podemos vincular variables en esto también usando el Vue.js de enlace de datos, y podemos agregar algunas otras funcionalidades en esto también usando Vue.js proporcionó sintaxis para las respectivas funcionalidades.
Texto
Esta es la sección donde podemos escribir la lógica del componente en javascript siguiendo las sintaxis de Vue.js. Todas las funcionalidades y la lógica de un componente van aquí. Por ejemplo,
- Importar otros componentes y paquetes necesarios.
- Declaración de variable
- Métodos / Funciones
- Ganchos de ciclo de vida
- Propiedades calculadas y observadores
- Y así…
Estilo
Aquí es donde escribimos el estilo en CSS del componente, o podemos usar cualquier preprocesador que queramos usar.
Esto es solo un vistazo de un componente en Vue.js. Echemos un vistazo al uso, la organización y el flujo de datos entre los componentes.
Importar y usar componentes
Para usar el componente, primero tenemos que importar el componente. De lo contrario, ¿cómo puede Vue.js lo saben? Simplemente podemos importar un componente agregando una declaración "Importar" al comienzo de la etiqueta de script y declarando ese componente en el objeto "componentes", usando la siguiente sintaxis.
Después de importar el componente con éxito, podemos usarlo en la plantilla de esta manera
Así es como simplemente podemos importar y usar un componente en cualquier otro componente.
Organizar componentes
Al igual que cualquier otra aplicación, la organización de Componentes funciona como un árbol anidado. Por ejemplo, un sitio web simple que incluye un encabezado, una barra lateral y algunos otros componentes en un contenedor. La organización del componente sería así.
Imagen de Vue.js Documentos oficiales
Flujo de datos entre componentes
Puede haber dos tipos de flujo de datos entre componentes: Componente principal al componente secundario
Podemos enviar datos desde el componente padre al componente hijo usando accesorios: Componente hijo a componente padre
Podemos enviar datos emitiendo un evento desde el componente secundario y escucharlo en el otro extremo (componente principal).
Terminando
En este artículo, hemos recorrido todo un viaje para comprender un componente básico en Vue.js a su uso, jerarquía, organización e implementación de Importación, uso y conocimiento sobre la comunicación entre componentes. Este artículo cubre una gran cantidad de componentes, pero hay mucho conocimiento profundo sobre los componentes que existen. Entonces, siéntete libre de visitar el Vue.js Documentos Oficiales para más información.
