VueJS - Liaison : Guide du débutant

Salut là, future superstar de Vue.js ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde des liaisons de Vue.js. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux te dire que les liaisons sont comme la sauce secrète qui rend Vue.js si délicieux. Alors, mettons nos manches à la pâte et plongeons dedans !

Qu'est-ce que la Liaison dans Vue.js ?

Avant de rentrer dans les détails, comprenons ce que signifie la liaison. Dans Vue.js, la liaison est la manière dont nous connectons nos données au DOM (Document Object Model). C'est comme créer un lien magique entre ton code JavaScript et ce qui apparaît à l'écran. Génial, non ?

Liaison des Classes HTML

Imaginons que tu t'habilles pour une fête. Tu pourrais choisir différents habits en fonction de l'occasion, n'est-ce pas ? Eh bien, la liaison des classes HTML dans Vue.js fonctionne de manière similaire. Nous pouvons changer dynamiquement l'apparence de nos éléments en fonction de nos données.

Liaison de Classe de Base

Commençons par un exemple simple :

<div id="app">
<p :class="{ active: isActive }">Suis-je actif ?</p>
</div>

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

Dans cet exemple, nous lieons la classe 'active' à notre paragraphe en fonction de la propriété de données isActive. Si isActive est true, le paragraphe aura la classe 'active'. Si c'est false, il ne l'aura pas.

Multiples Classes

Mais que faire si nous voulons jongler avec plusieurs classes ? Pas de problème ! Vue.js nous couvre :

<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
Liaison multiple de classes
</p>
</div>

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

Ici, nous lions deux classes : 'active' et 'text-danger'. Le paragraphe aura la classe 'active', mais pas 'text-danger', sauf si nous changeons hasError en true.

Syntaxe de Tableau

Nous pouvons également utiliser une array pour lier les classes. C'est comme avoir un garde-robe de classes à choisir :

<div id="app">
<p :class="[activeClass, errorClass]">La syntaxe de tableau est géniale !</p>
</div>

<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

Dans ce cas, les classes 'active' et 'text-danger' seront appliquées au paragraphe.

Liaison des Styles en Ligne

Maintenant, parlons des styles en ligne. C'est comme donner à tes éléments un lifting sur le pouce !

Syntaxe d'Objet

Nous pouvons lier les styles en ligne en utilisant un objet :

<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Habille-moi !
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
textColor: 'rouge',
fontSize: 20
}
})
</script>

Cela définira la couleur en rouge et la taille de la police à 20px. Note que nous pouvons utiliser camelCase (fontSize) ou kebab-case ('font-size') pour les propriétés de style.

Syntaxe de Tableau

Nous pouvons également utiliser une array d'objets de style :

<div id="app">
<p :style="[baseStyles, overridingStyles]">Array de styles</p>
</div>

<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'bleu',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'gras'
}
}
})
</script>

Cela nous permet d'appliquer plusieurs objets de style, avec les objets de style ultérieurs dans le tableau qui écrasent les précédents en cas de conflits.

Liaisons des Entrées de Formulaire

Les liaisons des entrées de formulaire sont où Vue.js brille réellement. C'est comme avoir une ligne directe entre tes entrées de formulaire et tes données !

Entrée de Texte

Commençons par une simple entrée de texte :

<div id="app">
<input v-model="message" placeholder="Modifie-moi">
<p>Le message est : {{ message }}</p>
</div>

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

La directive v-model crée une liaison bidirectionnelle entre l'entrée et la propriété de données message. Tout changement dans l'entrée mettra immédiatement à jour message, et vice versa.

Case à Cocher

Les cases à cocher sont comme de petits interrupteurs on/off. Voici comment les lier :

<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>

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

La propriété checked sera true lorsque la case à cocher est cochée, et false lorsqu'elle ne l'est pas.

Boutons Radio

Les boutons radio sont comme des questions à choix multiples. Un seul peut être sélectionné à la fois :

<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Un</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Deux</label>
<br>
<span>Sélectionné : {{ picked }}</span>
</div>

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

La propriété picked sera définie avec la valeur du bouton radio sélectionné.

Menu Déroulant

Enfin, regardons les menus déroulants :

<div id="app">
<select v-model="selected">
<option disabled value="">S'il vous plaît sélectionnez un</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Sélectionné : {{ selected }}</span>
</div>

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

La propriété selected sera définie avec la valeur de l'option sélectionnée.

Résumé des Méthodes de Liaison

Voici un tableau de réference rapide des méthodes de liaison que nous avons couvertes :

Type de Liaison	Syntaxe	Description
Classe (Objet)	:class="{ className: condition }"	Applique une classe en fonction de la condition
Classe (Tableau)	:class="[class1, class2]"	Applique plusieurs classes
Style (Objet)	:style="{ propriété: valeur }"	Applique des styles en ligne
Style (Tableau)	:style="[styleObject1, styleObject2]"	Applique plusieurs objets de style
Entrée de Formulaire	v-model="propriétéDonnée"	Liaison bidirectionnelle pour les entrées de formulaire

Et voilà ! Tu viens de faire tes premiers pas dans le merveilleux monde des liaisons de Vue.js. Souviens-toi, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts. Avant de te rendre compte, tu seras lier les données comme un pro ! Bon codage !

Credits: Image by storyset