Bien démarrer avec les composants Vue
Par définition, un composant est « une partie ou un élément d’un tout plus grand ». Quand vous pensez à créer une application, vous travaillez généralement avec des parties plus petites et vous les combinez dans un tout plus grand : votre application. Vue vous permet de créer des composants que vous pouvez ensuite utiliser pour créer une application complète.
Composants Vue
Vous pouvez créer des composants en utilisant des fichiers JavaScript, mais la méthode la plus courante consiste à créer des composants monofichiers en utilisant la syntaxe Vue à l’intérieur d’un fichier .vue. Les composants monofichiers permettent une structure plus propre et une configuration plus autonome. Ils vous permettent même d’utiliser différents préprocesseurs, comme Pug ou Stylus.
Quand vous créez des composants, vous créez essentiellement de nouvelles balises que vous pouvez utiliser dans votre application de la même façon que des balises HTML normales. Cette forme de balises sémantiques clarifie ce qui est affiché sur une page. Une balise comme <booking-form></booking-form> va probablement afficher un formulaire pour la création d’une réservation et <booking-list></booking-list> va probablement afficher une liste de réservations.
Structure des composants Vue
Les composants Vue contiennent trois sections principales : style, script et template.
style
La section style peut contenir n’importe quel code CSS valide ou la syntaxe du préprocesseur que vous utilisez peut-être.
Vous pouvez également délimiter votre code CSS à ce composant spécifique en utilisant l’attribut scoped. Les styles s’appliquent alors seulement à ce composant, ce qui vous permet de créer des classes et d’autres paramètres sans vous soucier de modifier accidentellement d’autres parties de la page.
<style>
.demo {
font-family: Verdana
}
</style>
script
La section script stocke le script utilisé pour le composant. Comme avec un composant JavaScript Vue, vous pouvez exporter les différentes propriétés et méthodes Vue, comme data(), methods et components.
<script>
export default {
data() {
return {
product: {
name: 'Cruise to the moon',
description: 'A cool cruise to the moon!'
}
}
}
}
</script>
template
La section template héberge le modèle HTML que vous voulez utiliser pour afficher des informations et permettre à l’utilsateur d’interagir avec les données. Quand vous utilisez un composant JavaScript, template est généralement à l’intérieur du fichier .html ou est un littéral de chaîne dans un fichier JavaScript.
La syntaxe HTML utilisée dans template est la même que pour les composants JavaScript, notamment l’utilisation d’accolades ({{}}) pour afficher les données.
<template>
<div id="product">
<div>{{ product.name }}</div>
<div>{{ product.description }}</div>
</div>
</template>
Notes
Les modèles doivent avoir un élément racine. Autrement dit, l’élément div avec product comme id ne peut pas avoir de frères. Il peut avoir seulement des éléments enfants, comme le montre le code précédent.
Chargement et composants
Comme mentionné précédemment, les composants monofichiers sont enregistrés avec une extension .vue. Vous pouvez charger ces composants de la même façon que d’autres modules en utilisant l’instruction import. Vous pouvez les inscrire en utilisant la propriété components. Une fois les composants inscrits, ils peuvent être utilisés en tant que balise dans template.
Notes
Quand vous importez une bibliothèque en utilisant import, le standard est d’utiliser la casse « CamelCase » pour le nom, où la première lettre de chaque mot est en majuscule (par exemple PascalCase). En HTML cependant, la convention pour les noms des balises est d’utiliser la casse « kebab-case » avec chaque mot en minuscules et un tiret (-) entre les mots. Vue gère automatiquement les deux conventions différentes.
<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
components: {
ProductDisplay
}
}
Dans le code précédent, le composant ProductDisplay est importé et ajouté à la propriété components. Ensuite, quand ProductDisplay est utilisé dans le modèle, le compilateur de Vue peut indiquer que ce composant est un élément qu’il doit analyser et non pas un élément HTML normal.
Séparation des responsabilités
Placer du code HTML, CSS et JavaScript dans un même fichier peut sembler être à l’origine de la bonne pratique qui consiste à créer des fichiers distincts pour chaque type. Dans la pratique, basculer entre ces fichiers peut provoquer un ralentissement du développement en raison des interdépendances entre eux. Il y a également une charge cognitive associée à la nécessité de basculer entre les fichiers.
Les composants monofichiers vous permettent de créer des fichiers distincts pour vos sections script et style en utilisant l’attribut src.
<template>
<div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>