La liaison de données dans les applications web crée un lien entre l’instance de l’application et l’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. La liaison des données permet de créer des applications web dynamiques.


Ici, vous explorerez les différentes liaisons dans Vue, y compris les liaisons unidirectionnelles et bidirectionnelles. Vous apprendrez également à mettre en œuvre ces liaisons à l’aide de modèles et de directives mustache tels 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 la moustache, communément désigné par des accolades doubles ({{ }}).

Avec le modèle mustache, vous pouvez intégrer le contenu dynamique de l’application, comme les données et les propriétés de méthode, dans votre HTML. Vous pouvez y parvenir en enfermant les noms des données ou des propriétés de méthodes de l’objet options de Vue dans ces accolades.

Lire  Les meilleurs casques de jeu

Voici un exemple d’application Vue utilisant le modèle mustache pour réaliser une interpolation dans Vue :

 <body>
    <div id="app">
      <h1>{{ title }}</h1>
      <p>{{ text.toUpperCase() }}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            title: "Welcome",
            text: "This is your world?",
          };
        },
      });
      app.mount("#app");
    </script>
 </body>

Le bloc de code ci-dessus utilise le modèle mustache 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 d’une expression JavaScript par interpolation. Par exemple, le modèle {{text.toUpperCase()}} dans l’expression p affiche la version majuscule de la valeur du texte, comme le montre l’image ci-dessous :

Vue-app-utilizing-the-moustache-template-to-display-text-and-title (en anglais)

Lorsque vous montez une application Vue, Vue évalue les expressions dans les modèles et rend 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 :

 <script>
            const app = Vue.createApp({
              data() {
                return {
                  title: "Hello",
                  text: "This is your world?",
                };
              },
            });
            app.mount("#app");
</script>

Le bloc de code ci-dessus modifie la propriété title en « Bonjour ». Cette modification sera automatiquement répercutée dans l’interface utilisateur puisque l’application Vue lie la propriété title à l’élément de l’interface utilisateur, comme indiqué ci-dessous :

updated-Vue-app-displaying-the-text-and-title-properties

L’interpolation ne produit des données que lorsque les doubles crochets sont entre les balises HTML ouvrante et fermante.

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

Comme l’interpolation, la liaison de données à sens unique relie l’instance de l’application à l’interface utilisateur. La différence est qu’elle lie les propriétés comme les données et les méthodes aux attributs HTML.

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

Vous pouvez réaliser une liaison de données unidirectionnelle dans Vue avec la méthode v-bind ou son caractère abrégé (:) :

 <!-- the v-bind directive -->
<input type="text" v-bind:value="text"> 

<!-- the : shorthand character -->
<input type="text" :value="text">

Le bloc de code montre l’utilisation de la directive v-bind et de son raccourci pour lier la valeur de la balise HTML input à une propriété de données textuelles. Voici un exemple d’application Vue utilisant la directive v-bind pour obtenir une liaison de données à sens unique :

 <body>
  <div id="app">
    <input type="text" v-bind:value="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

Ci-dessus, un champ de saisie et un élément de paragraphe affichent la valeur de la directive texte propriété. Les valeur du champ de saisie est lié à la propriété text à l’aide de la méthode v-bind directive.

Ce bloc de code crée une liaison à sens unique, dans laquelle les modifications apportées à la directive texte mettra à jour la valeur du champ de saisie, mais les modifications apportées au champ de saisie ne mettront pas à jour la propriété texte dans l’instance de l’application Vue.

Pour le montrer, nous pouvons commencer par la valeur initiale de la propriété texte propriété, « Vue is awesome ! »:

Application Vue utilisant la directive v-bind pour représenter la valeur du texte

Après avoir changé la valeur du champ de saisie en « Hello World ! »Si l’application Vue n’a pas été mise à jour, le texte de la balise paragraphe est resté le même :

L'application Vue n'est pas mise à jour après avoir modifié le contenu du champ de saisie

Cependant, lorsque nous modifions la valeur du champ texte propriété à Hello World ! 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 :

L'application Vue a été mise à jour après avoir modifié la valeur du texte dans l'instance de l'application.

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

Liaison de données à double sens avec la directive v-model

La liaison bidirectionnelle des données permet aux modifications de la valeur d’un élément d’interface utilisateur d’être automatiquement répercutées dans le modèle de données sous-jacent et vice versa. La plupart des frameworks JavaScript frontaux comme Angular utilisent la liaison bidirectionnelle pour partager des données et gérer des événements en temps réel.

Vue.js rend possible la liaison bidirectionnelle grâce à la fonction v-model directive. La directive v-modèle 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é de données, et toute modification de la propriété de données met également à jour l’élément d’entrée.

Voici un exemple d’application Vue qui utilise la fonction v-model pour obtenir une liaison bidirectionnelle des données :

 <head>
  <title>Two-way data binding in Vue</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

Le bloc de code ci-dessus comporte un élément d’entrée avec la directive v-modèle qui la lie à la directive texte propriété des données. La propriété texte est initialement fixée à « Vue est génial !.

Le champ de saisie met à jour la propriété text lorsque vous tapez dans le champ et reflète les changements de la propriété text dans le champ de saisie. p tag. Vue.js utilise la directive v-model et l’élément input pour réaliser une liaison de données bidirectionnelle.

Alors que v-bind permet une communication unidirectionnelle entre l’application Vue et l’interface utilisateur, v-model permet une communication bidirectionnelle entre l’application Vue et l’interface utilisateur. En raison de sa capacité à permettre une communication bidirectionnelle, v-model est souvent utilisé pour travailler avec des éléments de formulaire dans Vue.

Élargir votre expertise dans la construction d’applications Vue

Vous avez découvert la liaison de données dans Vue, notamment l’interpolation et les directives v-bind et v-model. Ces liaisons de données sont essentielles, car elles constituent la base des applications Vue.

Vue dispose 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 aidera à construire un front-end dynamique et interactif pour vos applications web.