Introduction à la liaison d'attributs dynamiques

La directive v-bind constitue un mécanisme essentiel de Vue.js pour relier dynamiquement des attributs HTML aux données de votre instance. Cet article explore ses multiples applications pratiques à travers des exemples concrets.

1. Fondamentaux de v-bind

Pour débuter, examinons comment lier des attributs de base comme les sources d'images et les URLs de liens.

Implémentation de base

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Liaison d'attributs dynamiques</title>
</head>
<body>

<div id="application">
  <figure>
    <img v-bind:src="photoUrl" alt="Illustration dynamique">
  </figure>
  <nav>
    <a v-bind:href="pageCible">Visiter le site</a>
  </nav>
  
  <hr>
  
  <!-- Syntaxe abrégée -->
  <figure>
    <img :src="photoUrl" alt="Illustration dynamique">
  </figure>
  <nav>
    <a :href="pageCible">Visiter le site</a>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const application = new Vue({
    el: '#application',
    data: {
      photoUrl: 'https://via.placeholder.com/300x150/4A90E2/FFFFFF?text=Vue.js',
      pageCible: 'https://vuejs.org'
    }
  });
</script>

</body>
</html>

2. Application sur les classes CSS

La liaison de classes permet d'appliquer conditionnellement des styles en fonction de l'état de vos données.

Activation conditionnelle d'une classe

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Liaison dynamique de classes</title>
  <style>
    .highlighted {
      color: #E74C3C;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="app-classes">
  <p :class="{highlighted: estActive}">Texte susceptible de mise en évidence</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app-classes',
    data: {
      estActive: true
    }
  });
</script>

</body>
</html>

3. Cas pratique : Navigation par sélection

Cosntruisons un menu interactif où l'élément sélectionné reçoit un style distinct.

Menu interactif avec v-for

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Navigation interactive</title>
  <style>
    .selected {
      background-color: #3498DB;
      color: white;
      padding: 8px;
      margin: 4px 0;
      border-radius: 4px;
    }
    li {
      cursor: pointer;
      list-style: none;
      padding: 8px;
    }
  </style>
</head>
<body>

<div id="app-menu">
  <ul>
    <li v-for="(langage, position) in langages"
        :key="position"
        :class="{selected: position === indexSelectionne}"
        @click="selectionnerElement(position)">
      {{ position + 1 }}. {{ langage }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app-menu',
    data: {
      langages: ['JavaScript', 'Python', 'Go', 'Rust', 'TypeScript'],
      indexSelectionne: 0
    },
    methods: {
      selectionnerElement(position) {
        this.indexSelectionne = position;
      }
    }
  });
</script>

</body>
</html>

4. Combinaisons avancées de classes

Vue.js supporte plusieurs stratégies pour appliquer simutlanément plusieurs classes dynamiques.

Techniques multiples de liaison

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Combinaisons de classes</title>
  <style>
    .bold { font-weight: 800; }
    .italic { font-style: italic; }
    .big { font-size: 2.5em; }
    .shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
  </style>
</head>
<body>

<div id="app-multi-classes">
  <!-- Classes conditionnelles -->
  <h3 :class="{bold: estGras, italic: estItalique}">Titre avec classes conditionnelles</h3>
  
  <!-- Mixage statique et dynamique -->
  <h3 class="big" :class="{bold: estGras, shadow: estOmbre}">Titre mixte</h3>
  
  <!-- Tableau de classes statiques -->
  <h3 class="big" :class="['bold', 'shadow']">Titre avec tableau de classes</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app-multi-classes',
    data: {
      estGras: true,
      estItalique: false,
      estOmbre: true
    }
  });
</script>

</body>
</html>

5. Liaison d'attributs de style

Pour les styles inline, Vue.js offre une syntaxe objet particulièrement expressive.

Styles dyanmiques avec syntaxe objet

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Liaison de styles inline</title>
</head>
<body>

<div id="app-styles">
  <!-- Syntaxe directe -->
  <h4 :style="{color: couleurTexte, fontSize: taillePolice + 'px', textAlign: alignment}">
    Style déclaratif
  </h4>
  
  <!-- Objet de style réutilisable -->
  <h4 :style="objetStyle">Style via objet réutilisable</h4>
  
  <!-- Combinaison de plusieurs objets -->
  <h4 :style="[stylePartie1, stylePartie2]">Style combiné</h4>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app-styles',
    data: {
      couleurTexte: '#8E44AD',
      taillePolice: 36,
      alignment: 'center',
      objetStyle: {
        color: '#16A085',
        fontSize: '42px',
        letterSpacing: '2px'
      },
      stylePartie1: {
        fontSize: '28px',
        color: '#C0392B'
      },
      stylePartie2: {
        textDecoration: 'line-through',
        opacity: 0.7
      }
    }
  });
</script>

</body>
</html>

Ces patterns couvrent la majorité des cas d'usage courants pour la liaison dynamique d'attributs dans Vue.js, vous permettant de créer des interfaces réactives et maintenables.