Vue.Composants js

Vue.js est un framework javascript progressif, qui est utilisé pour créer des interfaces utilisateur (interfaces utilisateur) et des SPA (applications à page unique). Nous pouvons commencer à créer des applications Web dans Vue.js avec des connaissances de base en HTML, CSS et Javascript. Vue.js est construit en combinant les meilleures fonctionnalités des frameworks Angular et React existants. Les développeurs adorent coder et ressentir la liberté et le confort lors de la création d'applications dans Vue.js.

Cette approche basée sur les composants a été essentiellement inspirée et choisie de ReactJS. Nous écrivons du code sous forme de composants afin de pouvoir importer ce composant et le réutiliser partout où nous en avons besoin. Vue.js propose un composant à fichier unique, ce qui en fait un code faiblement couplé 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 dans un seul .fichier vue. Les développeurs se sentent tellement à 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 examinerons le composant à fichier unique, qui a un .extension de vue. Alors, regardons un exemple de composant Vue très simple et comprenons-le.

Ceci est un exemple très simple et basique d'un composant Vue. Dans lequel on peut 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 des préoccupations tout en étant en un seul .fichier vue. Nous avons notre modèle (HTML), notre logique en Javascript et notre 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 à l'aide de Vue.js syntaxe de liaison de données, et nous pouvons également ajouter d'autres fonctionnalités à l'aide de Vue.js a fourni la syntaxe pour les fonctionnalités respectives.

Scénario

C'est la section où l'on peut écrire la logique du composant en javascript en suivant les syntaxes de Vue.js. Toutes les fonctionnalités et la logique d'un composant se trouvent ici. Par example,

• Importation d'autres composants et packages nécessaires.
• Déclaration de variables
• Méthodes/Fonctions
• Crochets de cycle de vie
• Propriétés calculées et observateurs
• Etc…

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 dans Vue.js. Jetons un coup d'œil à l'utilisation, à l'organisation et au flux de données entre les composants.

Importer et utiliser des composants

Pour utiliser le composant, nous devons d'abord importer le composant. Sinon, comment Vue.j'en suis au courant? Nous pouvons simplement importer un composant en ajoutant une instruction « Importer » 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 ceci