👩🏼‍🍳 🤸🏻 👶🏼 Vue.js pour les débutants, leçon 2: liaison d'attributs 🍵 💅🏼 👨🏽‍🚀

Ceci est la deuxième leçon du tutoriel Vue.js pour les débutants, qui est recommandé par Natalia Teplukhina, ingénieur du personnel de Gitlab et membre de l'équipe principale du framework Vue (une session de questions / réponses avec Natasha a eu lieu sur notre instagram , et la transcription peut être lue ici )

Dans la deuxième leçon, nous parlerons à propos de la liaison d'attributs, à propos de la connexion des données stockées dans une instance Vue aux attributs des éléments HTML. → Première leçon

Le but de la leçon

Ici, nous allons voir comment afficher une image et définir le texte d'attribut à l'aide de la liaison d'attribut alt. Nous prendrons les données pertinentes de l'instance Vue.

Code initial

Commençons par index.htmlle code HTML suivant, situé dans le fichier , dans la balise <body>:

<div id="app">

  <div class="product">

    <div class="product-image">
      <img src="" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>

  </div>
</div>

Faites attention à l'étiquette <div>avec la classe product-image. Il contient l'élément <img>auquel nous voulons lier dynamiquement les données nécessaires pour afficher l'image.

Un élément <div>avec une classe est product-infoutilisé pour afficher le nom d'un produit.

Voici le JavaScript contenu dans le fichier main.js:

var app = new Vue({
    el: '#app',
    data: {
        product: "Socks",
        image: "./assets/vmSocks-green.jpg"
    }
})

Notez que l'objet a datamaintenant une nouvelle propriété imagecontenant le chemin d'accès à l'image.

→ Le CSS utilisé dans ce tutoriel peut être trouvé ici .

Pour connecter le style à index.html, ajoutez ce qui <head>suit à la balise :

<link rel="stylesheet" type="text/css" href="style.css"

Ici, nous partons de l'hypothèse que le fichier de style a un nom style.csset est stocké dans le même dossier que index.html.

Voici l'image que nous afficherons sur la page.

Une tâche

Nous avons besoin d'une image à afficher sur la page. Ce faisant, nous voulons manipuler dynamiquement cette image. Autrement dit, nous avons besoin de la possibilité de modifier le chemin de l'image stockée dans l'instance Vue et de voir immédiatement les résultats de ces modifications sur la page. Puisque c'est l'attribut d' srcélément qui <img>est responsable de l'image que l'élément affichera, nous devons lier certaines données à cet attribut. Cela nous permettra de modifier dynamiquement l'image en fonction des données stockées dans l'instance Vue.

Un terme important: la liaison de données

Lorsque nous parlons de liaison de données dans Vue, le fait est que l'endroit dans le modèle dans lequel les données sont utilisées ou affichées est directement "connecté" ou "lié" à la source de données, c'est-à-dire à l'objet correspondant stocké dans l'instance Vue.

En d'autres termes, l'entité source de données est associée à l'entité dans laquelle ces données sont utilisées, avec le puits de données. Dans notre cas, la source de données est une instance de Vue et le puits est un attribut de l' srcélément <img>.

La solution du problème

Pour lier une valeur imagede propriété d'un objet de données à une propriété de srcbalise <img>, nous utiliserons la directive Vue v-bind. Réécrivons le code <img>de la balise à partir du fichier index.html:

<img v-bind:src="image" />

Lorsque Vue, lors du traitement d'une page, voit une telle construction, le framework la remplace par le code HTML suivant:

<img src="./assets/vmSocks-green.jpg" />

Si tout est fait correctement, une image sera affichée sur la page.

L'image des chaussettes vertes est affichée sur la page

Et si vous changez la valeur de laimagepropriétéde l'objetdata, la valeur de l'attribut changera en conséquencesrc, ce qui conduira à l'affichage d'une nouvelle image sur la page.

Disons que nous voulons remplacer les chaussettes vertes par les bleues. Pour ce faire, étant donné que le chemin d'accès au fichier avec la nouvelle image ressemble./assets/vmSocks-blue.jpg(le fichier image peut être trouvé ici ), il suffit de ramener le code de description de propriétéimagedans l'objetdatasous cette forme:

image: "./assets/vmSocks-blue.jpg"

Cela fera apparaître l'image de chaussettes bleues sur la page.

L'image des chaussettes bleues s'affiche sur la page

Cas d'utilisation supplémentaires pour v-bind

La directive v-bindpeut être utilisée non seulement avec un attribut src. Cela peut également nous aider à ajuster dynamiquement l'attribut d'image alt.

Ajoutons une datanouvelle propriété à l'objet avec des options altText:

altText: "A pair of socks"

Lions les données correspondantes à l'attribut alt, apportant le code <img>de l'élément sous cette forme:

<img v-bind:src="image" v-bind:alt="altText" />

Ici, comme dans le cas de l'attribut src, la construction est utilisée, composée d'un v-binddeux-points et du nom d'attribut ( alt).

Maintenant, si les propriétés de l'instance Vue changent imageou altText, les <img>données mises à jour apparaîtront dans les attributs d'élément correspondants . Cela ne rompra pas le lien entre les attributs de l'élément et les données stockées dans l'instance Vue.

Cette technique est constamment utilisée lors du développement d'applications Vue. Pour cette raison, il existe une version abrégée de l'enregistrement de construction v-bind:. Cela ressemble à :. Si vous utilisez cette technique lors de l'écriture de code de balise <img>, vous obtenez ce qui suit:

<img :src="image" />

C'est simple et pratique. Cette technique améliore la propreté du code.

Atelier

Ajoutez un lien (élément <a>) avec du texte à la page More products like this. Dans l'objet, datacréez une propriété linkcontenant le lien https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Liez, à l'aide d'une directive v-bind, une propriété linkà un attribut d'un hrefélément <a>.

→ Voici un modèle que vous pouvez utiliser pour résoudre ce problème.

→ Voici la solution au problème.

Résultat

Voici ce que nous avons appris aujourd'hui:

Les données stockées dans l'instance Vue peuvent être liées à des attributs HTML.
La directive est utilisée pour lier les données aux attributs v-bind. Le raccourci pour cette directive est deux-points ( :).
Un nom d'attribut qui suit un signe deux-points indique l'attribut auquel les données sont liées.
En tant que valeur de l'attribut spécifié entre guillemets, le nom de la clé est utilisé, par lequel vous pouvez trouver les données connectées à l'attribut.

Si vous suivez ce cours, nous vous demandons de nous dire quel environnement vous utilisez pour faire vos devoirs.

→ Partie 1: Instanciation de Vue

→ Partie 2: Liaison d'attributs dans Vue

Vue.js pour les débutants, leçon 2: liaison d'attributs