CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Comprendre et Utiliser le Data Binding en Vue.js

Comprendre et Utiliser le Data Binding en Vue.js

Data binding
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Vue JS 3
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction au Data Binding

Objectifs

À la fin de cette vidéo, vous serez capable de :
- Utiliser le data binding pour lier des propriétés du modèle à des attributs HTML.
- Manipuler l'inner HTML des balises avec Vue.js.
- Travailler avec les directives v-bind et sa version abrégée.

Résumé

Cette leçon vous apprendra à utiliser le data binding pour lier les propriétés du modèle aux attributs HTML avec Vue.js.

Description

Dans ce cours, nous allons explorer une technique essentielle en Vue.js : le data binding. Vous apprendrez à insérer des propriétés du modèle dans l'inner HTML des balises grâce à l'interpolation. Ensuite, nous montrerons comment affecter une propriété du modèle à un attribut HTML. Nous vous expliquerons les deux syntaxes possibles : en utilisant v-bind: ou sa version abrégée avec les deux points :. Vous découvrirez comment afficher dynamiquement une image en liant l'URL définie dans le modèle à l'attribut src d'une balise img. Enfin, nous vous proposerons un petit exercice pour lier une propriété de type ID à une balise div et vérifier le résultat dans la console du navigateur.

Voir plus

Questions fréquentes

Qu'est-ce que le data binding en Vue.js ?
Le data binding en Vue.js est une technique qui permet de lier les propriétés du modèle aux attributs des éléments HTML, ce qui facilite la gestion dynamique des données dans les applications web.
Comment peut-on lier une propriété du modèle à l'attribut src d'une balise img en Vue.js ?
On peut utiliser l'attribut v-bind:src ou sa version abrégée :src pour lier une propriété du modèle à l'attribut src d'une balise img.
Quelle est la syntaxe abrégée pour lier une propriété du modèle à un attribut HTML en Vue.js ?
La syntaxe abrégée pour lier une propriété du modèle à un attribut HTML en Vue.js consiste à utiliser les deux points suivis de l'attribut, par exemple :src au lieu de v-bind:src.

Programme détaillé