La structure des modèles script style
Découvrez la structure en trois parties d’un fichier de composant Svelte.
La structure des modèles script style est une leçon Sveltejs 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 Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Trois sections
Un fichier de composant Svelte comporte trois blocs facultatifs de premier niveau : <script>, le balisage et <style>.
Le bloc de script
Le bloc de script contient la logique du composant en JavaScript ou TypeScript standard.
<script>
let name = "Ada";
</script>Le balisage
Tout ce qui se trouve en dehors des balises de script et de style constitue le balisage du composant. Il s'agit de HTML enrichi par la syntaxe de modèle de Svelte.
<h1>Hello {name}!</h1>Le bloc de styles
Les styles sont limités à ce composant. Les autres composants conservent leur propre apparence.
<style>
h1 { color: rebeccapurple; }
</style>Un composant complet
Combinez les trois éléments dans un seul fichier .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Convention d'ordre
La convention place le script en premier, le balisage en deuxième et les styles en dernier. Svelte n'impose pas cet ordre.
Variante TypeScript
Ajoutez lang="ts" à la balise de script pour utiliser TypeScript à l'intérieur.
<script lang="ts">
let name: string = "Ada";
</script>Contexte du script de module
Utilisez <script context="module"> pour le code exécuté une fois par module, et non une fois par instance.
<script context="module">
export const VERSION = "1.0";
</script>Pas de blocs multiples
Vous pouvez avoir au plus un script d'instance et un script de module par fichier.
Balise de style facultative
Si votre composant n'a aucun style, omettez entièrement le bloc de style.
Balise de script facultative
Les composants constitués uniquement de balisage statique peuvent également omettre le bloc de script. Un fichier .svelte composé uniquement de balisage est valide.
Vérification rapide
Où placez-vous le CSS limité au composant ?
Récapitulatif
Un fichier Svelte comporte jusqu'à trois blocs : script pour la logique, balisage et style pour le CSS limité au composant.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « La structure des modèles script style » est-elle gratuite ?
Oui — le texte complet de « La structure des modèles script style » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « La structure des modèles script style » ?
Découvrez la structure en trois parties d’un fichier de composant Svelte. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « La structure des modèles script style » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La structure des modèles script style
- Variables réactives avec let
- Interpolation : {expression}
- Valeurs calculées : déclarations réactives $: