Corrigé Atelier 2 Directives et événements dans VueJS

Dans cet atelier, on va traiter les directives. En Vue.js, une directive est un attribut que l’on place au
niveau d’une balise HTML.

Avec Vue.js, l’attribut commence toujours par le préfixe -v

Le but des directives en Vue.js est de rapidement effectuer des opérations sur le DOM lorsqu’une
expression change dans votre code.

1. Recueil des directives Vue

Les directives Vue.js sont des attributs html qui peuvent être inséré dans votre page afin de modifier
le rendu de votre application Vue.

Voici quelques directives :

v-bind

Permet d'assigner une expression à un attribut. Vue va remplacer l'expression par sa valeur.

<img v-bind:src="image_url" />

// ou syntaxe raccourci
<img :src="image_url" />

v-if, v-else-if et v-else

Affiche ou non l’élément HTML sur lequel il est situé. Exemple, rendre un élément visible ou non visible
selon la valeur vrai ou faux de l'expression. Lorsque non visible l'élément n'est pas rendu dans le html.

<div v-if="montant > 100">

Livraison gratuite!
<div>
<div v-else-if="montant > 50">
Livraison 9.95$
</div>
<div v-else>
Livraison 19.95$
</div>

v-for

Permet d'afficher une liste d'élément.

<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
À noter le mot clé "key" est nécessaire pour permettre à Vue d'identifier uniquement l'élément

Ref

Permet à votre application Vue d'identifier un élément html et d'effectuer des actions sur cet élément.

Identification avec la directif ref

<input type="text" ref="name">

Manipulation à partir de votre code Vue en utilisant le mot clé spécial : $refs

methods: {
handleClick() {
console.log(this.$refs.name)
this.$refs.name.classList.add('active')
this.$refs.name.focus()
}
}

v-model

Permet de lier la valeur d'un champ de saisie avec une variable. Si vous modifiez l'un ou l'autre Vue
mettra à jour automatiquement l'autre. Du coup, la variable et le champ de saisie auront toujours la
même valeur.

<input v-model="name" type="text" />

<div>
Nom : {{ name }}
</div>

style

Il est possibile de faire un v-bind sur l'attribut style.

<div :style="{'margin-top': '10px', 'padding': '5px'">

Hello World
</div>

Remarque :

Cet élément permet d'utiliser des directives de Vue sans créer un élément html.

<template v-show="quantity === 0">

La quantité doit être supérieur à zéro
</template>

2. Les événements

Vue permet de gérer les événements javascript comme click, input, change, etc. Pour ce faire vous
devez utiliser la directive v-on: suivie du nom de l'évènement.
v-on:click

Permet d'exécuter du code sur le click d'un élément

<button v-on:click="name = 'Mike'">Afficher message</button>

// ou syntaxe raccourci
<button @click="name = 'Mike'">Afficher message</button>

v-on:submit

Permet d'exécuter du code lors de la soumission d'un formulaire

<form v-on:submit.prevent="name = 'Mike'">

<input v-model="name" type="text" />
<button type="submit">Sauvegarde</button>
</form>

À noter, la présence de ".prevent" après la directive v-on:submit. Cette instruction va prévenir la

soumission du formulaire au serveur.

3. Les méthodes

Vue js permet de créer des méthodes afin d'y placer un block de code réutilisable dans votre
application. Voici la syntaxe pour créer une méthode :

Vue.createApp({
data() {
return {
name: "Mike Taylor",
}
},
methods: {
resetName() {
this.name = ''
}
}
}).mount('#app')

À noter le mot clé 'this' placé en avant de la variable name. Ce mot clé est obligatoire pour permettre
de référencer une variable à l'intérieure de notre instance de Vue.

Pour appeler une méthode vous pouvez le faire simplement en utilisant son nom.

<input v-model="name" type="text" />

<button @click="resetName" type="text">Effacer</button>

Une méthode peut également contenir des paramètres

methods: {
resetName(newName) {
this.name = newName
 }
}
<input v-model="name" type="text" />
<button @click="resetName('John')" type="text">Effacer</button>

Une méthode peut également envoyer l'object event

methods: {
resetName(newName, e) {
this.name = newName
console.log(e.target.textContent)
}
}
<input v-model="name" type="text" />
<button @click="resetName('John', $event)" type="text">Effacer</button>

À noter le paramètre spécial $event va envoyer l'object event à notre méthode

4. Créer un nouveau projet VueJS

Pour installer le projet Vue, si ce n’est pas déjà fait au préalable, nous devons avoir Vue CLI installé sur
notre système de développement. Exécutez la commande suivante pour installer Vue CLI :
npm install -g @vue/cli

Utilisez la commande suivante pour installer le projet vue.

vue create atelier2

Nous devons choisir la version 3 de Vue.

Rendez-vous sur le projet de vue :

cd atelier2

Ouvrez le projet vue dans l’éditeur Visual Studio Code :

code .

Dans l’invite de commande, exécutez la commande pour démarrer l'application sur le navigateur :
npm run serve

Une fois le serveur hébergé et l'application démarrée, vous pouvez accéder à http://localhost:8080/.

5. Dans le dossier « src/assets » du projet Vue, créer un répertoire intitulé « images ». Puis y
télécharger les différentes images de produits qu’on va afficher dans notre site.
6. Nous allons créer un composant nommé « Villes.vue » sous le dossier components. Il
contient les données suivantes :
- Un titre ayant comme valeur « Les principales villes de la Tunisie ».
 - Un tableau d’objets nommé « tabVilles » contenant les valeurs suivantes :

{id :1,nom : "Tunis",photo : "images/tunis.jpg"},

{id :1,nom : "Sousse",photo : "images/sousse.jpg"},

{id :1,nom : "Sfax",photo : "images/sfax.jpg"},

{id :1,nom : "Gabes",photo : "images/gabes.jpg"},

]

a. Déclarez ces variables dans la partie script.

<script>

export default {
name: 'Villes',
data(){
return{
titre:"Les principales villes de la Tunisie",

tabVilles:[
{id :1,nom : "Tunis",photo : "images/tunis.jpg"},
{id :1,nom : "Sousse",photo : "images/sousse.jpg"},
{id :1,nom : "Sfax",photo : "images/sfax.jpg"},
{id :1,nom : "Gabes",photo : "images/gabes.jpg"},
]
}
}
}
</script>

b. Utilisez l’interpolation de texte pour afficher le titre dans le template

<h1>{{titre}}</h1>

c. Utilisez la directive v-for pour afficher le tableau et v-bind pour afficher l’image (ou sa version
raccourcie).

<ul>
<li v-for="item in tabVilles" :key="item.id">
{{ item.nom }}
<img :src="require(`../assets/images/${item.photo}`)" alr=""
width="60" />
</li>
</ul>

d. Utilisez la directive v-if pour faire le test si le nom de ville est tunis afficher le message qu’il
s’agit de la capitale.
<span v-if="item.nom == 'Tunis' ">
La capitale de la Tunisie
</span>

e. Ajoutez le style pour donner la taille 20 au texte.

<div :style="{ 'font-size': '20px' }">

Le code complet devient :

<template>
<div>
<h1>{{ titre }}</h1>
<ul :style="{ 'font-size': '20px' }">
<li v-for="item in tabVilles" :key="item.id">
{{ item.nom }}
<img :src="require(`../assets/images/${item.photo}`)" alr=""
width="60" />
<span v-if="item.nom == 'Tunis' ">
La capitale de la Tunisie
</span>
</li>
</ul>
</div>
</template>

<script>

export default {
name: 'Villes',
data(){
return{
titre:"Les principales villes de la Tunisie",
tabVilles:[
{id :1,nom : "Tunis",photo : "tunis.jpg"},
{id :1,nom : "Sousse",photo : "sousse.jpg"},
{id :1,nom : "Sfax",photo : "sfax.jpg"},
{id :1,nom : "Gabes",photo : "gabes.jpg"},
],
}
}
}
</script>

f. Faire appel au composant « Villes.vue » par « App.vue ».

<template>
<div>
 <Villes />
</div>
</template>

<script>
import Villes from "./components/Villes.vue"
export default {
name: 'app',
components: {
Villes
}
}
</script>

Le résultat dans le navigateur :

7. Créer un nouveau composant nommé « Monuments.vue » sous le dossier « components ». Il

contient les données suivantes :
- Une variable appelée « nomMonument » qui est initialement vide. Avec la directive v-model
on va lui associer un champ texte.
- Un tableau appelé « tabMonuments » qui est initialement vide aussi. Il se rempli à partir des
saisies effectuées à partir du champ « nomMonument » une fois on clique sur le bouton
« Ajouter » qui appelle la méthode « Ajout » . On affichera son contenu.

On fera appel à ce composant dans « App.vue ».

components/Monuments.vue

<template>
<div>
<div>
<input type="text" v-model="nomMonument"/>
<button @click.prevent="Ajout()">Ajouter</button>
</div>
<div v-if="nomMonument.length > 0">
Monument ajouté : {{ nomMonument }}
 </div>
<div v-if="tabMonuments">
<div v-for="item in tabMonuments" :key="item">
{{item}}
</div>
</div>
</div>
</template>

<script>

export default {
name: 'Monuments',
data(){
return{
nomMonument:"",
tabMonuments:[],
}
},
methods:{
Ajout(){
this.tabMonuments.push(this.nomMonument)
}
}
}
</script>

App.vue

<template>
<div>
<Villes />
<Monuments/>
</div>
</template>

<script>
import Villes from "./components/Villes.vue"
import Monuments from "./components/Monuments.vue"
export default {
name: 'app',
components: {
Villes,
Monuments
}
}
</script>
Le résultat dans le navigateur :