VueJS - Rendering

Bonjour là, future superstar de Vue.js ! Je suis ravi de devenir votre guide sur ce voyage passionnant dans le monde du rendu de Vue.js. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux vous assurer que maîtriser le rendu, c'est comme apprendre à peindre - c'est ainsi que nous donnons vie à nos toiles numériques ! Alors, mettons nos manches et plongeons dedans !

Rendu Conditionnel

Imaginez que vous êtes un magicien, et que vous voulez faire apparaître ou disparaître des choses sur votre page web d'un revers de main. C'est essentiellement ce que permet le rendu conditionnel dans Vue.js ! Il s'agit de montrer ou de cacher des éléments en fonction de certaines conditions.

Directive v-if

La directive v-if est notre premier tour de magie. C'est comme un videur dans un club, décider qui entre et qui ne rentre pas.

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

Dans cet exemple, l'élément <h1> ne s'affichera que si isVisible est true. Si c'est false, pouf ! L'élément disparaît entirely du DOM. Il n'est pas juste caché - il est parti, comme s'il n'avait jamais existé !

Directives v-else et v-else-if

Ajoutons maintenant un peu plus de magie à notre spectacle avec v-else et v-else-if :

<div id="app">
<div v-if="temperature < 0">Il fait glacial !</div>
<div v-else-if="temperature < 20">Il fait frais.</div>
<div v-else>Il fait chaud !</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

Ici, nous créons un petit bulletin météo. En fonction de la valeur de temperature, différents messages s'afficheront. C'est comme avoir plusieurs trappes sur une scène - seulement une peut être ouverte à la fois !

Directive v-show

Parfois, nous voulons être un peu plus discrets. Voici v-show :

<div id="app">
<h1 v-show="isVisible">Je suis toujours là, mais parfois invisible !</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

Contrairement à v-if, v-show ne supprime pas l'élément du DOM. Il le cache simplement en utilisant CSS. Pensez-y comme à jeter un manteau d'invisibilité sur votre élément plutôt que de le faire disparaître complètement.

Rendu de Listes

Maintenant que nous avons maîtrisé comment faire apparaître et disparaître des choses, apprenons comment créer plusieurs éléments à partir d'un seul modèle. C'est là que le rendu de listes devient utile !

Directive v-for

La directive v-for est comme une machine à copier magique. Elle prend un modèle et le duplique pour chaque élément dans un tableau ou un objet.

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

Dans cet exemple, nous créons une liste de courses de fruits. La directive v-for parcourt chaque fruit dans notre tableau fruits et crée un nouvel élément <li> pour chacun. C'est comme avoir une équipe de petits elfes, chacun écrivant le nom d'un fruit sur une nouvelle feuille de papier !

Utilisation de v-for avec un Objet

v-for n'est pas seulement pour les tableaux - il fonctionne aussi avec les objets !

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: 'Développeur'
}
}
})
</script>

Ici, nous affichons des informations sur une personne. La directive v-for parcourt chaque propriété de l'objet person, créant un nouvel élément <li> pour chaque paire clé-valeur.

v-for avec une Plage

Vous souhaitez créer un nombre spécifique d'éléments ? v-for peut le faire aussi !

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

Cela affichera les nombres de 1 à 5. C'est comme demander à Vue de compter pour vous !

Attribut Key

Lorsque vous utilisez v-for, il est important de donner à chaque élément rendu un key unique. Cela aide Vue à suivre quels éléments ont changé, ont été ajoutés ou ont été supprimés.

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

Pensez à la key comme une étiquette de nom pour chaque élément. Elle aide Vue à identifier qui est qui lorsque la liste change.

Tableau des Méthodes

Voici un tableau pratique résumant les méthodes que nous avons apprises :

Directive	But	Exemple
v-if	Rendre conditionnellement un élément	<div v-if="isVisible">Bonjour</div>
v-else	Fournir une alternative lorsque v-if est faux	<div v-else>Adieu</div>
v-else-if	Fournir des conditions supplémentaires	<div v-else-if="isSpecial">Spécial</div>
v-show	Basculer la visibilité d'un élément	<div v-show="isVisible">Toujours dans le DOM</div>
v-for	Rendre une liste d'items	<li v-for="item in items">{{ item }}</li>

Et voilà, mes étudiants avides ! Nous avons couvert les bases du rendu dans Vue.js. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts. Bientôt, vous rendrez des composants Vue.js comme un pro, créant des pages web dynamiques et interactives qui impressionneront vos utilisateurs. Continuez à coder, continuez à apprendre, et surtout, continuez à vous amuser !

Credits: Image by storyset