Liaison de styles
La liaison de styles dans Vue utilise la directive v-bind pour appliquer dynamiquement des classes CSS. Voici un exemple où différentes classes sont liées à des variables.
<html>
<head>
<script src="https://unpkg.com/vue@2.6.10/vue.js"></script>
<style>
.couleur-bleue { color: #3498db; }
.taille-lg { font-size: 1.8em; }
.style-italique { font-style: italic; font-size: 1.4em; }
</style>
</head>
<body>
<div id="app">
<p>Texte simple : {{ contenu }}</p>
<div :class="classeA">{{ contenu }}</div>
<div :class="classeB">{{ contenu }}</div>
<div :class="classeC">{{ contenu }}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
contenu: 'Bienvenue dans Vue.js',
classeA: 'couleur-bleue',
classeB: 'taille-lg',
classeC: 'style-italique'
}
}
})
</script>
</html>
Gestion d'événements
Vue propose des modificateurs d'événements pour contrôler le comportement, comme .stop pour arrêter la propagation ou .once pour limiter l'exécution à une seule fois.
Exemples d'tuilisation des modificateurs :
<a v-on:click.stop="action"></a>- Empêche le bubbling<form v-on:submit.prevent="envoyer"></form>- Empêche le rechargement de la page<button v-on:click.once="actionUnique"></button>- Déclenchement unique
Voici un exemple pratique avec des événements imbriqués et un bouton à usage unique.
<html>
<head>
<script src="https://unpkg.com/vue@2.6.10/vue.js"></script>
<style>
.zone { padding: 20px; margin: 10px; border: 2px solid #ccc; }
</style>
</head>
<body>
<div id="app">
<div class="zone" @click="clicExterne">
Zone externe
<div class="zone" @click="clicMoyen">
Zone intermédiaire
<div class="zone" @click.stop="clicInterne">
Zone interne (propagation arrêtée)
</div>
</div>
</div>
<button @click.once="actionUnique">Clic unique</button>
<p>Compteur : {{ compteur }}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
compteur: 0
}
},
methods: {
clicExterne() {
alert('Clic sur la zone externe');
},
clicMoyen() {
alert('Clic sur la zone intermédiaire');
},
clicInterne() {
alert('Clic sur la zone interne');
},
actionUnique() {
this.compteur++;
alert('Action exécutée une seule fois');
}
}
})
</script>
</html>
Formulaires
La directive v-model crée une liaison bidirectionnelle entre les données et les éléments de formulaire. Elle fonctionne avec divers contrôles comme les inputs, selects et checkboxes.
Exemple de formulaire avec différents types de champs.
<html>
<head>
<script src="https://unpkg.com/vue@2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="soumettreFormulaire">
<label>Nom : <input v-model="nom" type="text"></label><br>
<label>Email : <input v-model="email" type="email"></label><br>
<label>Âge : <input v-model.number="age" type="number"></label><br>
<label>Statut :
<input type="radio" v-model="statut" value="etudiant"> Étudiant
<input type="radio" v-model="statut" value="professionnel"> Professionnel
</label><br>
<label>Compétences :
<input type="checkbox" v-model="competences" value="html"> HTML
<input type="checkbox" v-model="competences" value="css"> CSS
<input type="checkbox" v-model="competences" value="javascript"> JavaScript
</label><br>
<label>Pays :
<select v-model="pays">
<option value="france">France</option>
<option value="canada">Canada</option>
<option value="suisse">Suisse</option>
</select>
</label><br>
<label>Bio : <textarea v-model="bio"></textarea></label><br>
<label><input type="checkbox" v-model="accord"> J'accepte les conditions</label><br>
<input type="submit" value="Envoyer" :disabled="!accord">
</form>
<div v-if="envoye">
<p>Données soumises : {{ donnees }}</p>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
nom: '',
email: '',
age: null,
statut: '',
competences: [],
pays: '',
bio: '',
accord: false,
envoye: false,
donnees: {}
}
},
methods: {
soumettreFormulaire() {
this.donnees = {
nom: this.nom,
email: this.email,
age: this.age,
statut: this.statut,
competences: this.competences,
pays: this.pays,
bio: this.bio
};
this.envoye = true;
}
}
})
</script>
</html>
Composants Vue
Les composants Vue permettent de décomposer l'interface en éléments réutilisables. La communication parent-enfant s'effectue via les props pour les données entrantes et les événements personnalisés pour les données sortantes.
Passage de données du parenet à l'enfant avec props
<html>
<head>
<script src="https://unpkg.com/vue@2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<composant-enfant message-parent="Donnée du parent"></composant-enfant>
</div>
</body>
<script>
Vue.component('composant-enfant', {
props: ['messageParent'],
template: '<div><p>Message reçu : {{ messageParent }}</p></div>'
});
new Vue({ el: '#app' });
</script>
</html>
Émission d'événements de l'enfant vers le parent
<html>
<head>
<script src="https://unpkg.com/vue@2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>Total : {{ total }}</p>
<composant-compteur @incrementer="ajouterAuTotal"></composant-compteur>
</div>
</body>
<script>
Vue.component('composant-compteur', {
data() {
return { compteur: 0 }
},
template: `
<div>
<p>Compteur local : {{ compteur }}</p>
<button @click="incrementer">Incrémenter</button>
</div>
`,
methods: {
incrementer() {
this.compteur++;
this.$emit('incrementer', this.compteur);
}
}
});
new Vue({
el: '#app',
data() {
return { total: 0 }
},
methods: {
ajouterAuTotal(valeur) {
this.total = valeur;
}
}
});
</script>
</html>
Définition de composants globaux
<script>
Vue.component('bouton-global', {
props: ['label'],
template: '<button @click="action">{{ label }}</button>',
methods: {
action() {
alert('Bouton global cliqué');
}
}
});
</script>