Vue3 Directives intégrées

Vue.js dispose de plusieurs directives intégrées (Directives) pour ajouter un comportement réactif spécifique ou manipuler le DOM dans les templates.

Les directives intégrées couramment utilisées dans Vue.js sont les suivantes :

Directive Exemple d'utilisation Description
v-text <p v-text="message"></p> Met à jour le contenu de l'élémenttextContent, similaire à l'interpolation{{ }}, mais il s'agit d'une liaison unidirectionnelle.
v-html <div v-html="htmlContent"></div> Met à jour le contenu de l'élémentinnerHTML, utilisé pour afficher du HTML.
v-model <input v-model="value"> Crée une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire, en synchronisant les champs de saisie avec les propriétés de données.
v-show <div v-show="isVisible"></div> Bascule l'affichage et la visibilité d'un élément en fonction de la véracité d'une expression, en utilisant le CSSdisplaypropriété.
v-if <p v-if="isVisible">Visible</p> Effectue un rendu conditionnel d'un élément en fonction de la véracité d'une expression ; lorsque la condition est fausse, l'élément est supprimé du DOM.
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifUne directive supplémentaire pour afficher un contenu de repli lorsque la condition est fausse.
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> Utilisé consécutivement aprèsv-ifetv-elseaprès, pour un jugement à conditions multiples.
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> Itère sur chaque élément d'un tableau ou d'un objet, en générant un nombre correspondant d'éléments.
v-on <button v-on:click="handleClick">Click me</button> Attache un écouteur d'événement pour écouter les événements DOM ; peut être abrégé en@。
v-bind <img v-bind:src="imageSrc.html"> Lie dynamiquement des attributs HTML ; peut être abrégé en:。
v-slot <template v-slot:header><h2>Header</h2></template> Syntaxe pour les slots nommés, fournissant un emplacement pour insérer le contenu d'un composant enfant.
v-pre <div v-pre>{{ message }}</div> Ignore le processus de compilation pour cet élément et tous ses éléments enfants, utilisé pour afficher les balises Mustache brutes.
v-cloak [v-cloak] { display: none; } Masque le contenu du template jusqu'à ce que l'instance Vue ait terminé sa compilation, empêchant l'affichage des balises Mustache non compilées.
v-once <p v-once>{{ message }}</p> Effectue le rendu de l'élément et du composant une seule fois, et ne sera pas mis à jour lors des changements de données ultérieurs.
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

Met en cache un sous-arbre du template.

Lorsque le composant effectue un nouveau rendu, sivalueAetvalueBtoutes restent inchangées, ceci<div>et toutes les mises à jour de ses enfants seront ignorées. En fait, même la création de vnodes du DOM virtuel sera ignorée, car une copie mise en cache du sous-arbre peut être réutilisée.

v-text

  • Utilisation: <p v-text="message"></p>
  • Description: Met à jour le/la ... de l'élémenttextContent, similaire à l'interpolation{{ }}, mais il s'agit d'une liaison unidirectionnelle. Elle peut être utilisée pour définir le contenu en texte brut d'un élément.

Exemple

<p v-text="message"></p>

Exemple

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-html

  • Utilisation: <div v-html="htmlContent"></div>
  • Description: Met à jour le/la ... de l'élémentinnerHTML, utilisé pour afficher du contenu contenant une structure HTML. Il convient de faire attention à la sécurité pour éviter les attaques XSS.

Exemple

<div v-html="htmlContent"></div>

Exemple

data() {
    return {
        htmlContent: '<strong>Vue.js</strong> is awesome!'
    };
}

v-model

  • Utilisation: <input v-model="value">
  • Description: Crée une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire, en synchronisant les champs de saisie avec les propriétés de données, et prend en charge plusieurs types de contrôles de formulaire.

Exemple

<input type="text" v-model="message">

Exemple

data() {
    return {
    message: ''
    };
}

v-show

  • Utilisation: <div v-show="isVisible"></div>
  • Description: Bascule l'affichage et la visibilité d'un élément en fonction de la véracité d'une expression, en utilisant ladisplaypropriété CSS pour contrôler la visibilité de l'élément.

Exemple

<div v-show="isVisible">Visible lorsque true</div>

Exemple

data() {
    return {
    isVisible: true
    };
}

v-if / v-else / v-else-if

  • Utilisation: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • Description: Affiche conditionnellement un élément en fonction de la véracité d'une expression.v-elseetv-else-ifOuiv-ifUne directive supplémentaire pour le jugement multi-condition.

Exemple

<p v-if="isVisible">Visible</p>
<p v-else>Non visible</p>

Exemple

data() {
    return {
        isVisible: true
    };
}

v-for

  • Utilisation: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • Description: Parcourt chaque élément d’un tableau ou d’un objet, générant un nombre correspondant d’éléments, et permet de spécifier une clé pour améliorer l’efficacité du rendu.

Exemple

<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

Exemple

data() {
    return {
        items: ['Pomme', 'Banane', 'Cerise']
    };
}

v-on (@)

  • Utilisation: <button v-on:click="handleClick">Click me</button>
  • Description: Associe un écouteur d’événement pour écouter les événements DOM ; peut être abrégé en@. Prend en charge les modificateurs et les noms d’événements dynamiques.

Exemple

<button v-on:click="handleClick">Cliquez ici</button>

Exemple

methods: {
    handleClick() {
    alert('Bouton cliqué');
    }
}

v-bind ( : )

  • Utilisation: <img v-bind:src="imageSrc.html">
  • Description: Lie dynamiquement les attributs HTML ; peut être abrégé en:. Utilisé pour définir dynamiquement les attributs d'un élément, par exemplesrc、hrefetc.

Exemple

<img v-bind:src="imageSrc" alt="Vue Logo">

Exemple

data() {
    return {
    imageSrc: 'https://vuejs.org/images/logo.png'
    };
}

v-slot

  • Utilisation: <template v-slot:header><h2>Header</h2></template>
  • Description: Syntaxe pour les slots nommés, fournissant un emplacement pour insérer le contenu d'un composant enfant, utilisée pour la distribution de contenu dans les composants personnalisés.

Exemple

<BaseLayout>
    <template v-slot:header>
    <h2>Contenu d'en-tête</h2>
    </template>
    <template v-slot:footer>
    <p>Contenu du pied de page</p>
    </template>
</BaseLayout>

Exemple

// Définition du composant BaseLayout
Vue.component('BaseLayout', {
    template: `
    <div>
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><nom du slot="footer"></slot></footer>
    </div>
    `
});

v-pre

  • Utilisation: <div v-pre>{{ message }}</div>
  • Description: Ignore le processus de compilation pour cet élément et tous ses éléments enfants, utilisé pour afficher les balises Mustache brutes et empêcher Vue de compiler le contenu.

Exemple

<div v-pre>{{ message }}</div>

Exemple

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-cloak

  • Utilisation: [v-cloak] { display: none; }
  • Description: Masque le contenu du template jusqu'à ce que l'instance Vue ait terminé sa compilation, empêchant l'affichage des balises Mustache non compilées.

Exemple

<div v-cloak>{{ message }}</div>

Exemple

[v-cloak] { display: none; }

Exemple

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-once

  • Utilisation: <p v-once>{{ message }}</p>
  • Description: Effectue le rendu de l'élément et du composant une seule fois, et ne sera pas mis à jour lors des modifications ultérieures des données ; utilisé pour du contenu statique ou du contenu qui n'est pas fréquemment mis à jour.

Exemple

<p v-once>{{ message }}</p>

Exemple

data() {
    return {
    message: 'Hello, Vue!'
    };
}
Autres extensions