Introduction | smnarnold

Vue est un cadriciel JavaScript créé par Evan You (le créateur de Vite) permettant de rapidement et simplement développer des sites web ou applications de petites ou grandes envergures.

Sa grande force réside dans sa fonctionnalité de "two-way binding" permettant de mettre à jour automatiquement différentes informations dans une interface en fonction de la valeur de certaines propriétés.

Versions précédentes

La version courante et enseignée de Vue dans ce cours est la version 3. Cependant, il est probable que vous trouviez beaucoup de documentation concernant la version 2, puisque celle-ci était la plus récente jusqu'à la fin de l'année 2020.

Si vous lisez sur le sujet en ligne, faites attention de vous assurer que l'article parle bien de la version 3, car certaines différences importantes entre les deux versions pourraient vous causer des enjeux.

Qui l'utilise?

Adobe
Apple
Netflix
Nintendo
La NASA
Sid Lee
Wikipedia
Etc.

Installation

Comme pour toute librairie, afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans notre projet.

Pour ce faire, il est possible:

D'utiliser un CDN
D'utiliser la commande NPM
npm install vue@next
De le spécifier lors de la création d'un projet Vite.

Installation

Création d'une App

La première étape consiste à appeler la méthode createApp de l'objet global Vue. Celle-ci permet de créer une nouvelle instance d'une app Vue. Afin de pouvoir accéder à l'app ultérieurement, il est nécessaire de stocker le résultat dans une variable.

Par exemple:

const app = Vue.createApp({});

mount

Il faut ensuite associer l'app à une balise HTML afin de lui indiquer sa portée. Bref, seules cette balise et ses enfants pourront être contrôlées par l'app. Le reste du document n'existera pas à ses yeux.

Pour ce faire, l'app contenue dans la variable doit appeler sa méthode mount et lui passer en paramètre une chaine de caractères correspondant au sélecteur de la balise désirée.

Par exemple, si la balise souhaitée a le id app:

app.mount('#app');

Si le résultat du mount est stocké dans une variable, il est possible d'y accéder afin de changer ses données ou encore d'appeler ses méthodes.

Par exemple:

const vm = app.mount('#app');

createApp()

Données

Afin de définir le comportement de l'app, un objet contenant diverses propriétés doit lui être passé en paramètre. Parmi ces propriétés se trouve data contenant les données susceptibles de changer dans l'application.

Par exemple, pour définir une valeur de nom, il est possible d'écrire:

const app = Vue.createApp({
  data: function() {
    return {
      firstName: "Forrest",
      lastName: "Gump",
      picture: "forrest.jpg"
    }
  }
});

Pour des raisons de lisibilité, il est cependant suggéré d'utiliser la nouvelle syntaxe ES6, soit:

const app = Vue.createApp({
  data() {
    return {
      firstName: "Forrest",
      lastName: "Gump",
      picture: "forrest.jpg"
    }
  }
});

data est donc une fonction retournant un objet constitué dans ce cas-ci des propriétés: firstName, lastName et picture.

Data

Interpolations

Une fois, les données définies, il est possible d'y faire référence à l'aide de moustaches {{ ... }} (doubles accolades). Leurs contenus, incluant les moustaches elles-mêmes, seront remplacés par la donnée qui lui est associée. Qui plus est, si la valeur de cette donnée vient à changer, celle-ci se mettra automatiquement à jour dans le HTML.

Par exemple, le code suivant:

<div id="app">
  Bonjour {{ firstName }}
</div>

Affichera en fait:

<div id="app">
  Bonjour Forrest
</div>

Interpolations

Attributs

Les données peuvent aussi être insérées dans un attribut HTML (class, src, alt, style, etc.). Cependant, les moustaches ne sont pas fonctionnelles dans ce contexte ❌. Il faut donc plutôt utiliser une directive v-bind en début d'attribut afin que son contenu se popule avec une donnée présente dans l'objet data.

Par exemple, pour afficher l'image contenue dans la propriété picture:

<div id="app">
  <img v-bind:src="picture">
</div>

ou encore la syntaxe courte avec ::

<div id="app">
  <img :src="picture">
</div>

Si plusieurs données doivent être combinées dans le cadre d'un attribut, il est nécessaire d'utiliser un littéraux de gabarit afin de gérer la combinaison.

Par exemple, pour inscrire le prénom et le nom dans le alt d'une image:

<div id="app">
  <img :src="picture" :alt="`${firstName} ${lastName}`">
</div>

CodePen | smnarnold 👀

Attributs

Méthodes et Événements

La propriété methods dans une app Vue est un objet contenant différentes méthodes pouvant être appelées. Ces méthodes peuvent avoir accès aux données contenues dans data via this et les altérer au besoin.

Par exemple, la méthode showActor révélant l'acteur derrière le personnage:

const app = Vue.createApp({
  data() {
    return {
      firstName: "Forrest",
      lastName: "Gump",
      picture: "forrest.jpg"
    }
  },
  methods: {
    showActor() {
      this.firstName = "Tom";
      this.lastName = "Hanks";
      this.picture = "tom.jpg"
    }
  }
});

Ainsi, lorsque la méthode showActor est appelée, toutes les occurrences de firstName et lastName sont remplacées par Tom et Hanks.

v-on

Pour appeler une méthode, il faut ajouter un événement sur une balise dans l'app.

Par exemple, pour qu'un bouton appelle la méthode showActor():

<div id="app">
  Bonjour {{ firstName }}
  <button v-on:click="showActor()">Révéler l'acteur</button>
</div>

ou encore la syntaxe courte avec @:

<div id="app">
  Bonjour {{ firstName }}
  <button @click="showActor()">Révéler l'acteur</button>
</div>

CodePen | smnarnold 👀

Event Handling

Classes dynamiques

Il est fréquent qu'une classe doit-être ajouté ou retiré à un élément afin de refléter une action commise par un usager. Pour ce faire, Vue permet de passer un objet à un attribut. Cet objet doit contenir une propriété correspondant au nom de la classe souhaitée et comme valeur une donnée ou encore une expression. Ainsi, si cette valeur est évaluée à true, la classe est ajoutée et à l'opposée si elle est évaluée à false elle est retirée.

Par exemple, pour ajouter la classe pink lorsque la donnée isPink est équivalente à true:

<img :src="picture" :class="{pink: isPink}">

CodePen | smnarnold 👀

Si une classe contenant des caractères spéciaux doit être ajoutée, il sera nécessaire de l'entourer de guillemets.

Par exemple, une classe avec un trait d'union:

<img :src="picture" :class="{'is-pink': isPink}">

Multiple classes dynamiques

Puisqu'un objet est utilisé, il est possible d'ajouter plusieurs classes dynamiques simplement en les séparant par une virgule.

Par exemple:

<img :src="picture" :class="{pink: isPink, big: isBig}">

Combinaison avec des classes statiques

Si certaines classes doivent être statiques (ne jamais changer), alors que certaines doivent être dynamiques (pouvoir changer), il est nécessaire d'utiliser deux attributs class. Un 1^er sans v-bind ou : pour les classes statiques et un 2^e avec pour les classes dynamiques. Ces deux attributs seront ensuite combinés par Vue.

Par exemple:

<img :src="picture" class="media" :class="{pink: isPink}">

Produira le code suivant si la valeur de isPink est true:

<img src="forrest.jpg" class="media pink">

Class & Style Bindings

Rendu conditionnel

Certains éléments sont pertinents à afficher uniquement lorsqu'ils contiennent une valeur.

Par exemple, une bulle permettant d'afficher la date de naissance d'une personne n'est désirable que s'il y a une date à afficher. Si cette information n'est pas fournie, avoir une bulle vide est indésirable:

<div class="bubble" v-if="birth">{{ birth }}</div>

CodePen | smnarnold 👀

Rendu conditionnel

Boucle

Vue permet de boucler sur un tableau d'objets grâce à la directive v-for. Pour ce faire, il faut spécifier le nom temporaire que l'on souhaite attribuer à chaque objet dans le tableau et le tableau dans lequel ce trouve ces objets.

Par exemple, il est possible d'accéder à chaque rôle se trouvant dans le tableau rolesArray:

<div v-for="role in rolesArr">
  <img :src="role.picture">
</div>

Attention par la suite de spécifier si la propriété désirée est enfant de data ou du rôle courant dans la boucle en la préfixant par role.

CodePen | smnarnold 👀

Index

Afin d'obtenir l'index courant dans une boucle v-for, il est suffit d'ajouter un 2e paramètre dans la directive. Puisque deux paramètres sont présents, il est nécessaire de les grouper dans entre parenthèses.

Par exemple:

<div v-for="(role, index) in rolesArr">
  <img :src="role.picture">
</div>

CodePen | smnarnold 👀

Combinaison avec des événements

Il est possible de combiner une boucle avec des événements sans problème, simplement en spécifiant en paramètre à la méthode appelée l'objet devant être altéré.

CodePen | smnarnold 👀