Vue.componentes JS

Vue.JS es un marco progresivo de JavaScript, que se utiliza para construir UI (interfaces de usuario) y spas (aplicaciones de una sola página). Podemos comenzar a construir aplicaciones web en Vue.JS con el conocimiento básico de HTML, CSS y JavaScript. Vue.JS se construye combinando las mejores características de los marcos Angular y React ya existentes. A los desarrolladores les encanta codificar y sentir libertad y comodidad mientras construyen aplicaciones en Vue.js.

Este enfoque basado en componentes fue básicamente inspirado y elegido de los 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, que lo convierte en un código suelto y reutilizable.

Vue.JS ofrece el mejor enfoque basado en componentes, como lo que sea que un desarrollador necesite; Puede encontrarlo en un solo .archivo vue. Los desarrolladores se sienten tan cómodos y a gusto cuando no tienen que preocuparse o cuidan la estructura adicional de un componente.

En este artículo, echaremos un vistazo al componente de un solo archivo, que tiene un .extensión de vue. Entonces, echemos un vistazo a un ejemplo de componente VUE muy simple y lo entendamos.

Este es un ejemplo muy simple y básico de un componente Vue. En el que podemos ver que el código se divide en tres capas. Esta sintaxis de tres capas es la mejor parte de Vue.js. Satisface la separación de preocupación pero estar en un solo .archivo vue. Tenemos nuestra plantilla (HTML), lógica en JavaScript y estilo dentro de un componente.

• Plantilla
• Guion
• Estilo

Plantilla

En esta etiqueta de plantilla, escribimos nuestro código HTML. Podemos unir variables en esto también usando el Vue.JS Sintaxis de unión a datos, y podemos agregar algunas otras funcionalidades en esto también utilizando el Vue.JS proporcionó sintaxis para las funcionalidades respectivas.

Guion

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 variable
• Métodos/funciones
• Ganchos del ciclo de vida
• Propiedades y observadores calculados
• Etcétera…

Estilo

Aquí es donde escribimos el estilo en CSS del componente, o podemos usar cualquier preprocesador que queramos usar.

Esto es solo una visión de un componente en Vue.js. Echemos un vistazo al uso, la organización y el flujo de datos entre los componentes un poco.

Importar y usar componentes

Para usar el componente, primero tenemos que importar el componente. De lo contrario, ¿cómo puede vue?.JS lo sé? Simplemente podemos importar un componente agregando una declaración de "importación" al comienzo de la etiqueta de script y declarando ese componente en el objeto "componentes", utilizando la siguiente sintaxis.

Después de importar el componente con éxito, podemos usarlo en la plantilla como esta