Voici ce que vous devez savoir sur la liaison de données dans Vue

La liaison des données dans les applications Web crée un lien entre l'instance de l'application et l'interface utilisateur (interface utilisateur). L'instance de l'application gère les données, le comportement et les composants, tandis que l'interface utilisateur représente l'aspect visuel avec lequel les utilisateurs interagissent. Les données de liaison vous permettent de créer des applications Web dynamiques.

Ici, vous allez explorer diverses liaisons dans Vue, y compris les liaisons unidirectionnelles et bidirectionnelles. Vous apprendrez également à implémenter ces liaisons avec des modèles de moustache et des directives telles que v-bind et v-model.

Interpolation dans Vue

L'interpolation est l'un des types de liaison de données les plus populaires de Vue. L'interpolation vous permet d'afficher des valeurs de données dans vos balises HTML (Hyper Text Markup Language) avec le modèle de moustache, généralement désigné par des accolades doubles ({{ }}).

Avec le modèle de moustache, vous pouvez intégrer du contenu d'application dynamique comme des données et des propriétés de méthode dans votre code HTML. Vous pouvez y parvenir en joignant les noms de données ou de propriété de méthode à partir du objet options dans Vue entre ces accolades.

Voici une instance d'une application Vue utilisant le modèle de moustache pour réaliser une interpolation dans Vue :

<corps>
<dividentifiant="application">
<h1>{{ titre }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 titre: "Bienvenue",
 texte: "C'est votre monde ?",
 };
 },
 });
 app.mount("#app");
scénario>
corps>

Le bloc de code ci-dessus utilise le modèle de moustache pour afficher la valeur de la propriété title dans l'objet de données de l'application Vue. Vous pouvez également afficher les résultats des expressions JavaScript avec interpolation. Par exemple, le {{text.toUpperCase()}} expression dans le p tag affiche la version majuscule de la valeur textuelle, comme illustré dans l'image ci-dessous :

Lorsque vous montez une application Vue, Vue évalue les expressions dans les modèles et restitue les valeurs résultantes dans le corps HTML. Toute modification des propriétés des données met à jour les valeurs correspondantes dans l'interface utilisateur.

Par exemple:

<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 titre: "Bonjour",
 texte: "C'est votre monde ?",
 };
 },
 });
 app.mount("#app");
scénario>

Le bloc de code ci-dessus change la propriété title en "Bonjour". Cette modification se reflétera automatiquement dans l'interface utilisateur puisque l'application Vue lie la propriété title à l'élément de l'interface utilisateur, comme indiqué ci-dessous :

L'interpolation ne produit des données que lorsque les accolades doubles se trouvent entre les balises HTML d'ouverture et de fermeture.

Liaison de données à sens unique avec la directive v-bind

Comme l'interpolation, la liaison de données unidirectionnelle relie l'instance de l'application à l'interface utilisateur. La différence est qu'il lie des propriétés telles que des données et des méthodes à des attributs HTML.

La liaison de données unidirectionnelle prend en charge le flux de données unidirectionnel, empêchant les utilisateurs d'apporter des modifications qui affectent les propriétés des données sur l'instance de l'application. Ceci est utile lorsque vous souhaitez afficher des données à l'utilisateur de l'application mais empêcher l'utilisateur de les modifier.

Vous pouvez obtenir une liaison de données unidirectionnelle dans Vue avec le liaison v directive ou son caractère abrégé (:):

 la directive v-bind 
<saisirtaper="texte"v-bind: valeur="texte">
 le: caractère abrégé 
<saisirtaper="texte":valeur="texte">

Le bloc de code montre l'utilisation de la directive v-bind et son raccourci pour lier la valeur de la balise HTML d'entrée à une propriété de données de texte. Voici un exemple d'application Vue utilisant le liaison v directive pour obtenir une liaison de données unidirectionnelle :

<corps>
<dividentifiant="application">
<saisirtaper="texte"v-bind: valeur="texte">
<p>{{ texte }}p>
div>
<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 texte: "La vue est géniale !"
 }
 }
 })
 app.mount('#app')
scénario>
corps>

Au-dessus, un champ de saisie et un élément de paragraphe affichent la valeur du texte propriété. Le valeur L'attribut du champ de saisie est lié à la propriété de texte à l'aide de la propriété liaison v directif.

Ce bloc de code crée une liaison unidirectionnelle, où les modifications apportées au texte La propriété mettra à jour la valeur du champ de saisie, mais les modifications apportées au champ de saisie ne mettront pas à jour la texte propriété dans l'instance de l'application Vue.

Pour le montrer, nous pouvons partir de la valeur initiale de texte propriété, "Vue est génial !:

Après avoir changé la valeur du champ de saisie en "Bonjour le monde!", notez que l'application Vue n'a pas été mise à jour et que le texte de la balise de paragraphe est resté le même :

Cependant, lorsque nous modifions la valeur de texte propriété à Bonjour le monde! dans l'instance de l'application Vue au lieu du champ de saisie, le champ de saisie est mis à jour pour refléter la nouvelle valeur :

Cette façon de lier les données est pratique dans les scénarios où vous souhaitez afficher des données à l'utilisateur mais empêcher l'utilisateur de les modifier directement. En tirant parti de v-bind dans Vue.js, vous pouvez établir une liaison unidirectionnelle, connectant facilement les données de votre application aux éléments de l'interface utilisateur.

Liaison de données bidirectionnelle avec la directive v-model

La liaison de données bidirectionnelle permet aux modifications apportées à la valeur d'un élément de l'interface utilisateur d'être automatiquement reflétées dans le modèle de données sous-jacent et vice versa. Le plus frontal Cadres JavaScript comme Angular utilise une reliure bidirectionnelle pour partager des données et gérer des événements en temps réel.

Vue.js rend possible la liaison bidirectionnelle avec le modèle en V directif. Le modèle en V crée une liaison de données bidirectionnelle entre un élément d'entrée de formulaire et une propriété de données. Lorsque vous tapez dans un élément d'entrée, la valeur est automatiquement mise à jour dans la propriété data, et toute modification apportée à la propriété data mettra également à jour l'élément d'entrée.

Voici un exemple d'application Vue qui utilise le modèle en V directive pour obtenir une liaison de données bidirectionnelle :

<diriger>
<titre>Liaison de données bidirectionnelle dans Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<saisirtaper="texte"modèle en V="texte">
<p>{{ texte }}p>
div>
<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 texte: "La vue est géniale !"
 }
 }
 })
 app.mount('#app')
scénario>
corps>

Le bloc de code ci-dessus a un élément d'entrée avec le modèle en V directive le liant au texte propriété des données. Le texte la propriété est initialement définie sur "La vue est géniale !".

Le champ de saisie met à jour la propriété de texte lorsque vous y tapez et reflète les modifications apportées à la propriété de texte dans le p étiqueter. Vue.js utilise la directive v-model et l'élément d'entrée pour réaliser une liaison de données bidirectionnelle.

Alors que v-bind permet une communication unidirectionnelle de l'application Vue vers l'interface utilisateur, v-model fournit une communication bidirectionnelle entre l'application Vue et l'interface utilisateur. En raison de sa capacité à permettre une communication bidirectionnelle, modèle en V est souvent utilisé lorsque vous travaillez avec des éléments de formulaire dans Vue.

Élargissez votre expertise dans la création d'applications Vue

Vous avez appris la liaison de données dans Vue, y compris l'interpolation et les directives v-bind et v-model. Ces liaisons de données sont essentielles, car elles servent de base aux applications Vue.

Vue a de nombreuses autres directives pour les cas d'utilisation, tels que le rendu de liste, la liaison d'événements et le rendu conditionnel. Comprendre les directives Vue vous aide à créer une interface dynamique et interactive pour vos applications Web.