SFC Vue : script, template et style
Comprenez le format des composants monofichiers : le bloc script pour la logique, le bloc template pour la vue et le bloc style pour le CSS à portée limitée.
SFC Vue : script, template et style est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'un composant monofichier ?
Un composant monofichier Vue (SFC) est un fichier .vue comportant trois blocs : <script> pour la logique JavaScript, <template> pour la vue HTML et <style> pour CSS. Tout ce qui concerne un composant se trouve dans un seul fichier.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Le bloc de script
La logique, les données, les importations et le code de l'API de composition vont ici. Avec <script setup>, les variables et les importations déclarées au niveau supérieur sont automatiquement disponibles dans le modèle.
script setup — L'approche moderne
<script setup> est la syntaxe SFC recommandée. Les variables, propriétés calculées et fonctions qui y sont déclarées sont directement disponibles dans le modèle sans qu'il soit nécessaire de les renvoyer explicitement.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Le bloc de modèle
Le modèle contient la vue HTML du composant. Les modèles Vue sont compilés en fonctions de rendu. Utilisez les attributs et directives propres à Vue (v-if, v-for, @click) dans le modèle.
Interpolation de modèle
Utilisez les doubles accolades {{ }} pour afficher des données réactives sous forme de texte. Vue échappe automatiquement le HTML — pour afficher du HTML, utilisez la directive v-html (avec prudence).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Le bloc de style
Le CSS du bloc de style s'applique au composant. Ajoutez scoped pour limiter les styles aux seuls éléments de ce composant et empêcher les fuites accidentelles de styles globaux.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>Fonctionnement des styles limités
Vue ajoute un attribut de données unique (comme data-v-abc123) aux éléments du composant et réécrit les sélecteurs CSS limités pour l'inclure. Cela garantit que les styles ne correspondent qu'aux éléments de ce composant.
Modules CSS dans Vue
Une alternative aux styles limités consiste à utiliser <style module> pour les modules CSS. Accédez aux noms de classes via l'objet $style dans le modèle.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Styles globaux
Les styles sans portée limitée s'appliquent globalement. Un modèle courant consiste à utiliser un app.css global pour les styles de base et les jetons de conception, ainsi que des styles limités par composant pour les règles propres à chaque composant.
TypeScript dans les SFC
Ajoutez lang="ts" au bloc de script pour utiliser TypeScript. Volar (l'extension officielle de Vue pour les environnements de développement intégrés) fournit une prise en charge complète de TypeScript pour les SFC Vue, notamment des modèles dont les types sont vérifiés.
Nommage des fichiers SFC
Nommez les fichiers SFC en PascalCase (UserProfile.vue) pour les composants utilisés dans les modèles. Vue recommande des noms composés de plusieurs mots afin d'éviter les conflits avec les éléments HTML.
Vérification rapide
Que fait l’attribut scoped sur un bloc <style> Vue ?
Récapitulatif : SFC Vue
Les fichiers .vue comportent trois blocs : script (logique), template (vue) et style (CSS). Utilisez