Vue.composants JS

Vue.JS est un framework JavaScript progressif, qui est utilisé pour créer des interfaces UIS (interfaces utilisateur) et des spas (applications à une page). Nous pouvons commencer à créer des applications Web dans Vue.JS avec la connaissance de base de HTML, CSS et JavaScript. Vue.JS est construit en combinant les meilleures fonctionnalités de frameworks angulaires et réagis déjà existants. Les développeurs aiment coder et ressentir la liberté et le confort tout en construisant des applications à Vue.js.

Cette approche basée sur les composants a été essentiellement inspirée et choisie dans les ReactJS. Nous écrivons du code sous forme de composants afin que nous puissions importer ce composant et le réutiliser partout où nous en avons besoin. Vue.JS propose un composant unique, ce qui en fait un code à couplage lâche et réutilisable.

Vue.JS offre la meilleure approche basée sur les composants, comme tout ce dont un développeur a besoin; Il peut le trouver en un seul .fichier vue. Les développeurs se sentent si à l'aise et à l'aise lorsqu'ils n'ont pas à s'inquiéter ou à s'occuper de la structure supplémentaire d'un composant.

Dans cet article, nous allons jeter un œil à la composante unique, qui a un .extension Vue. Alors, jetons un coup d'œil à un exemple de composant Vue très simple et comprenons-le.

C'est un exemple très simple et de base d'un composant Vue. Dans lequel nous pouvons voir que le code est divisé en trois couches. Cette syntaxe à trois couches est la meilleure partie de Vue.js. Il satisfait la séparation de l'inquiétude, mais étant en un seul .fichier vue. Nous avons notre modèle (HTML), la logique en JavaScript et le style à l'intérieur d'un composant.

• Modèle
• Scénario
• Style

Modèle

Dans cette balise de modèle, nous écrivons notre code HTML. Nous pouvons également lier des variables en utilisant le Vue.Syntaxe de liaison aux données JS, et nous pouvons également ajouter d'autres fonctionnalités en utilisant le VUE.JS a fourni une syntaxe pour les fonctionnalités respectives.

Scénario

Ceci est la section où nous pouvons écrire la logique du composant en JavaScript en suivant les syntaxes de Vue.js. Toutes les fonctionnalités et la logique d'un composant vont ici. Par exemple,

• Importation d'autres composants et packages nécessaires.
• Déclaration variable
• Méthodes / fonctions
• Crochets du cycle de vie
• Propriétés et observateurs calculés
• Et ainsi de suite…

Style

C'est là que nous écrivons le style en CSS du composant, ou nous pouvons utiliser n'importe quel préprocesseur que nous voulons utiliser.

Ceci est juste un aperçu d'un composant de Vue.js. Jetons un coup d'œil à l'utilisation, à l'organisation et au flux de données entre les composants un peu.

Importer et utiliser les composants

Pour utiliser le composant, nous devons d'abord importer le composant. Sinon, comment peut Vue.JS le savent? Nous pouvons simplement importer un composant en ajoutant une instruction «IMPORT» au début de la balise de script et en déclarant ce composant dans l'objet «Composants», en utilisant la syntaxe suivante.

Après avoir importé le composant avec succès, nous pouvons l'utiliser dans le modèle comme celui-ci