Directives Vue3
Les directives Vue sont une fonctionnalité essentielle de Vue.js. Elles peuvent être utilisées dans les templates HTML en tant qu'v-attributs spéciaux commençant par v-, utilisés pour lier des données réactives à des éléments DOM ou pour effectuer des opérations sur des éléments DOM.
Les directives Vue sont préfixées d'v-attributs HTML spéciaux, qui donnent aux balises HTML des fonctionnalités supplémentaires.
Par rapport aux méthodes JavaScript traditionnelles, utiliser Vue pour créer des pages réactives est beaucoup plus facile et nécessite moins de code.
Voici plusieurs directives Vue couramment utilisées :
| Directive | Description |
|---|---|
v-bind |
S'utilise pour lier les données d'une instance Vue aux attributs des éléments HTML. |
v-if |
S'utilise pour effectuer un rendu conditionnel d'éléments ou de composants en fonction de la valeur d'une expression. |
v-show |
v-show est une directive fournie par Vue.js pour afficher ou masquer conditionnellement un élément en fonction de la valeur d'une expression. |
v-for |
S'utilise pour effectuer le rendu d'éléments ou de composants en boucle en fonction des valeurs d'un tableau ou des propriétés d'un objet. |
v-on |
S'utilise pour lier des écouteurs d'événements aux éléments HTML afin qu'ils puissent déclencher des méthodes ou des fonctions de l'instance Vue. |
v-model |
S'utilise pour créer une liaison de données bidirectionnelle entre les contrôles de formulaire et les données de l'instance Vue. |
En plus de ces directives couramment utilisées, Vue propose également d'autres directives, telles que v-text, v-html, etc., ainsi que des directives personnalisées, permettant aux développeurs de manipuler les éléments DOM de manière plus flexible.
Exemple
Voici quelques exemples d'utilisation des directives Vue :
Utilisation de la directivev-modelpour implémenter une liaison de données bidirectionnelle pour les données de formulaire :
Exemple
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Essayez-le vous-même »
Utilisation de la directivev-bindpour lier les données d'une instance Vue aux attributs des éléments HTML :
Exemple
<img v-bind:src="imageSrc">
</div>
<script>
const HelloVueApp = {
data() {
return {
imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Essayez-le vous-même »
Utilisation de la directivev-ifetv-elsepour effectuer un rendu conditionnel d'éléments ou de composants en fonction de la valeur d'une expression :
Exemple
<p v-if="showMessage">Hello Vue!</p>
<p v-else>Au revoir Vue !</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
showMessage: true
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Essayez-le vous-même »
Utilisation de la directivev-forpour afficher des éléments ou des composants en boucle selon les valeurs des propriétés d'un tableau :
Exemple
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
<script>
const HelloVueApp = {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Essayez-le vous-même »
Utilisez la directive v-on pour lier des écouteurs d'événements aux éléments HTML :
Exemple
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
</div>
<button v-on:click=" lightOn =! lightOn ">Marche/Arrêt</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
Essayez-le vous-même »
Voici un exemple utilisantv-showdirective :
Exemple
<button v-on:click="showMessage = !showMessage">Afficher/Masquer</button>
<p v-show="showMessage">Bonjour Vue !</p>
</div>
<script>
const HelloVueApp = {
data() {
return {
showMessage: true
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
Essayez-le vous-même »