Liaison d'attributs avec v-bind
Les directives Vue.js, identifiables par le préfixe v-, sont des fonctionnalités spéciales qui appliquent un comportement réactif au DOM. La directive v-bind permet de lier dynamiquement un attribut HTML à une expression Vue. Par exemple, lier l'attribut titre d'un élément à une donnée du modèle assure que toute modification de cette donnée met automatiquement à jour l'attribut dans le DOM.
Dans l'exemple ci-dessous, l'info-bulle affichée au survol est générée à partir d'une propriété Vue. En modifiant cette propriété via la console JavaScript, l'interface se met à jour en temps réel.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démonstration v-bind</title>
</head>
<body>
<div id="monApp">
<span v-bind:titre="texteInfo">Survolez pour voir l'info-bulle dynamique</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el: '#monApp',
data: {
texteInfo: 'Bienvenue dans Vue.js !'
}
});
</script>
</body>
</html>
Conditions avec v-if, v-else-if et v-else
Pour afficher conditionnellement des éléments selon une expression, Vue offre les directives v-if, v-else-if et v-else. Ces directives évaluent une condition JavaScript et rendent ou suppriment les éléments du DOM en conséquence. Cela permet de créer des interfaces dynamiques qui réagissent aux changements de données.
Dans le code suivant, le contenu affiché change en fonction de la valeur de la propriété typeContenu. En modifiant cette propriété, la structure affichée s'adapte automatiquement.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démonstration v-if</title>
</head>
<body>
<div id="appContenu">
<p v-if="typeContenu === 'alpha'">Contenu Alpha</p>
<p v-else-if="typeContenu === 'beta'">Contenu Beta</p>
<p v-else>Contenu par défaut</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el: '#appContenu',
data: {
typeContenu: 'alpha'
}
});
</script>
</body>
</html>
Gestion des événements avec v-on
La directive v-on permet d'écouter les événements du DOM et d'attacher des méthodes définies dans l'instance Vue. Elle peut être utilisée avec des événements standards comme click ou des événements personnalisés. Cela facilite l'interaction entre l'utilisateur et l'application en déclenchant des actions basées sur des événements.
L'exemple ci-dessous illustre un bouton qui, lorsqu'il est cliqué, appelle une méthode pour afficher une alerte avec un message provenant des données Vue. La méthode est définie dans la section methods de l'instance.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Démonstration v-on</title>
</head>
<body>
<div id="appEvenement">
<button v-on:click="montrerMessage">Cliquez ici</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el: '#appEvenement',
data: {
messageCache: 'Événement déclenché !'
},
methods: {
montrerMessage: function() {
alert(this.messageCache);
}
}
});
</script>
</body>
</html>