Interpolation et directives
Utilisez l’interpolation avec accolades et les directives principales dans les templates
Interpolation et directives est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.
Présentation de la syntaxe des modèles
Les modèles Vue sont du HTML valide enrichi d’une syntaxe spéciale :
- Interpolation par accolades doubles pour le texte
- Directives (attributs préfixés par v-) pour le comportement
Vue compile ces éléments en fonctions de rendu efficaces.
Interpolation par accolades doubles
Les doubles accolades, ou syntaxe mustache, affichent du texte.
Le contenu est une expression JavaScript, et pas seulement un nom de variable.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind pour les attributs
Les accolades ne fonctionnent pas à l’intérieur des attributs HTML. Utilisez v-bind pour lier des données à un attribut.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>Abréviation de v-bind
v-bind est si courant qu’il possède une abréviation : utilisez simplement deux-points.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on pour les événements
La directive v-on écoute les événements du DOM et exécute des gestionnaires.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>Abréviation de v-on
v-on possède également une abréviation : le symbole arobase.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Gestionnaires intégrés ou méthodes
Les gestionnaires d’événements peuvent être des expressions intégrées ou des noms de méthodes.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
La directive v-text définit le contenu textuel d’un élément. Elle équivaut à une interpolation par accolades doubles.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
La directive v-html affiche une chaîne comme du véritable HTML, et non comme du texte échappé.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html et risque XSS
Avertissement : v-html est dangereux avec du contenu non fiable.
- Il peut injecter des scripts malveillants (attaques XSS)
- Utilisez-le uniquement avec du contenu auquel vous faites entièrement confiance
- N’affichez jamais directement du HTML envoyé par un utilisateur
Pour le texte ordinaire, préférez toujours l’interpolation par accolades doubles, qui échappe le HTML.
Arguments des directives
Certaines directives acceptent un argument après deux-points, par exemple pour préciser l’attribut ou l’événement concerné.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Vérification rapide
Vérifiez votre compréhension de l’interpolation et des directives.
Récapitulatif : interpolation et directives
Vous avez appris les bases des modèles Vue :
- {{ }} avec les accolades doubles affiche des expressions textuelles
- v-bind (abréviation :) lie des attributs
- v-on (abréviation @) gère les événements
- v-text définit le contenu textuel
- v-html affiche du HTML brut (risque XSS, à utiliser avec prudence)
Ensuite : conditions et boucles.
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
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Interpolation et directives » est-elle gratuite ?
Oui — le texte complet de « Interpolation et directives » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Interpolation et directives » ?
Utilisez l’interpolation avec accolades et les directives principales dans les templates Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 3.
Combien de temps prend la leçon « Interpolation et directives » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Interpolation et directives
- Conditions et boucles
- Liaisons d’attributs et de classes