Cours 05 - Vue.js - Liaisons de données et directives

Objectifs

• Connaître le cadriciel "framework" JavaScript Vue.js
• Créer l'infrastructure de Vue.js
• Comprendre l'utilité de Vue.js

Déroulement

• Introduction au cours
  • Solution - Exercice 04
• Introduction à Vue.js
• Atelier 05 - Liaisons de données et directives
• Conclusion
  • Finaliser l'atelier 05
  • Aller regarder la documentation pour les outils pour Vue.js
  • Aller regarder la documentation pour Bootstrap 5

Introduction à Vue.js

Vue.js 3 : Qu'est-ce que c'est ?

• Vue.js 3 est une version majeure du framework JavaScript Vue.js, pour construire des interfaces utilisateur et des applications monopages.

Utilité

• Aide à créer des interfaces web réactives et dynamiques.
• Conçu pour être progressivement adoptable.
• Apprécié pour sa courbe d'apprentissage pas trop pire, documentation claire, et communauté active.

Avantages

1. Performance améliorée : Optimisation des performances pour les applications complexes.
2. Composition API : Meilleure réutilisation et organisation de la logique.
3. Meilleur support du TypeScript : Amélioration de l'intégration pour les projets TypeScript.
4. Plus léger : Optimisations pour un framework plus efficace.
5. Flexibilité et modularité : Choix entre l'API Options et l'API Composition.

Inconvénients

1. Courbe d'apprentissage pour l'API Composition : Peut sembler complexe au début.
2. Migration : Défis lors de la migration vers Vue.js 3 pour les projets existants.
3. Moins à la mode : React est la librairie la plus utilisée sur le marché du travail

API Options VS API Composition

Il y a deux manières d'utiliser l'API de Vue.js, l'API Options et L'API Composition.

API Options

L'API Options est une approche que vous pourriez connaître si vous avez déjà travaillé avec Vue.js 2. Elle est appelée ainsi parce que vous structurez votre composant en passant un objet "options" à Vue. Cet objet contient différentes options comme data, methods, props, computed, watch, etc. Chaque option a un rôle spécifique dans la définition du comportement du composant.

Avantages :

• Intuitive pour les débutants : La structure est assez simple à comprendre et à prendre en main pour les nouveaux développeurs.
• Organisée : Chaque partie du composant est regroupée par fonctionnalité, ce qui peut rendre le code plus lisible.

API Composition

Introduite avec Vue.js 3, l'API Composition offre une alternative flexible à l'API Options. Au lieu de définir un composant par options, vous utilisez des fonctions pour réutiliser la logique à travers différents composants. Cela est rendu possible grâce à une nouvelle fonctionnalité appelée "Composition API", incluant ref, reactive, computed, watch, et setup.

Avantages :

• Réutilisabilité : Facilite la réutilisation de la logique entre les composants sans recourir à des mécanismes complexes comme les mixins.
• Organisation du code : Permet une organisation du code plus flexible, en regroupant la logique par fonctionnalité plutôt que par option.
• Gestion d'état : Offre une meilleure visibilité et contrôle sur la réactivité et la gestion d'état local du composant.

Quand utiliser l'une ou l'autre ?

• Utilisez l'API Options si : Vous construisez des composants relativement simples ou si vous préférez une approche plus structurée et déclarative.
• Optez pour l'API Composition si : Vous travaillez sur une application complexe avec beaucoup de composants partageant une logique commune, ou si vous avez besoin d'une flexibilité maximale dans l'organisation de votre code.

En somme, l'API Composition est comme un ensemble d'outils modulaires pour construire la logique d'application, offrant plus de flexibilité et de contrôle, tandis que l'API Options fournit un cadre structuré et intuitif pour définir les composants. Le choix entre les deux dépend de vos besoins spécifiques en termes de complexité de l'application et de préférences personnelles en matière de développement.

Pour le cours nous allons utiliser l'API Composition!

En résumé

• Vue.js 3 apporte d'importantes améliorations qui le rendent plus performant, flexible, et adapté aux applications modernes.
• Ses avantages en font un excellent choix pour de nouveaux projets
• La transition peut nécessiter un ajustement pour ceux qui viennent de versions antérieures ou qui sont moins familiers avec les concepts avancés comme l'API Composition.

Liens utiles

• Site officiel de Vue.js
• Guide d'introduction à Vue.js
• Options API vs Composition API
• Qu’est ce qu’une directive ?

Atelier 05 - Vue.js - Liaisons de données et directives

Prérequis

• Prenez le temps d'aller lire à propos de l'extension: Volar https://marketplace.visualstudio.com/items?itemName=Vue.volar
• Allez lire la documentation sur les outils pour Vue.js
• Allez consulter la documentation de Vue.js 3 en français

Vidéo de démonstration

Écoutez la vidéo en faisant l'atelier 05

Partie 01 - Installation et démarrage

Nous allons utiliser Vite pour créer notre projet Vue avec Typescript
Documentation officielle

Vérifier node

• Pour tester la version

  node --version

Démarrer un projet vue.js

• Dans un dossier atel05, on va faire la commande:

  npm create vite@latest my-app -- --template vue-ts

• vite => notre outil de développement "frontend"
• template: vue-ts => pour indiquer qu'on va faire un projet vue.js AVEC typescript
• my-app => nom de l'app, ça pourrait être n'importe quoi c'est le nom de notre projet.

Aller dans le répertoire de l'app

cd my-app

Installer les dépendances

• Aller voir le fichier package.json, pour connaître les dépendances de projet
• Faire la commande d'installation:

  npm install    

Rouler le serveur

npm run dev    

Allez tester le serveur en cliquant sur le lien fourni

Partie 02 - Exploration et création de composants

Documentation officielle

Exploration des fichiers

index.html
la div ou notre application va être "monté"

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

l'importation d'un module JavaScript nommé main

<script type="module" src="/src/main.ts"></script>

main.ts

• Utilisation de la librairie CSS Bootstrap
• Pour empêcher l'utilisation du css de base de vuejs:
  • Dans le fichier main.ts, mettre en commentaire la ligne import './style.css'
• import permet d'importer des fichiers ou librairies
• createApp permet de créer l'application dans la div avec l'id app (rappel du dièze)

App.vue
Il y a 3 sections => script, template, style

• script
  script lang="ts" == typescript!
  import HelloWorld from './components/HelloWorld.vue' => on va chercher un composant

• template
  Après importation on peut s'en servir dans le template!

  <HelloWorld msg="Vite + Vue" />

• style
  dans style c'est le CSS propre à ce fichier!

On va effacer le contenu des trois sections pour partir de zéro!

Création de composants

Les composants nous permettent de fractionner l'UI en morceaux indépendants et réutilisables, sur lesquels nous pouvons réfléchir de manière isolée. Il est courant pour une application d'être organisée en un arbre de composants imbriqués.
Documentation officielle

Se créer un nouveau composant

• Aller dans le dossier components => Nouveau fichier
• Le fichier se nomme Timeline.vue (T majuscule les composants prennent une lettre majuscule)

Ouvrir le fichier Timeline.vue

• Faire les trois sections d'un fichier vue (script, template et style)
• Ne pas oublier le setup

  <script setup lang="ts"></script>

• Écrire le texte "Timeline" dans la section template pour tester le visuel
• On laisse la section style vide aussi

Importer notre nouveau composant

• Retour dans App.vue et dans script écrire:

  import Timeline from './components/Timeline.vue'

• Dans la section template on va écrire l'appel de notre composant:

  <Timeline />

• Sauvegarder tous les fichiers
• Retourner dans le navigateur pour tester, on devrait voir Timeline

Importation de BootStrap dans le projet:

• Dans le terminal faites les commandes:

  npm install --save bootstrap
  npm install --save @popperjs/core

• Dans la section script de App.vue mettre l'importation suivante:

  import "bootstrap/dist/css/bootstrap.min.css"
  import "bootstrap"

• À partir d'ici bootstrap devrait être intégré et les classes de celui-ci disponibles!

Retour dans Timeline.vue pour améliorer l'affichage

• Avec Emmet: nav>span>a va créer le HTML suivant:

  <nav>
  <span>
      <a href="#">Aujourd'hui</a>
  </span>
  </nav>

Retour dans App.vue

• Autour du composant timeline on va mettre une div avec Emmet: div.container
• Aller voir dans le navigateur les changements

Partie 03 - Les directives

Lisez ces 4 directives, car on va s'en servir

Liaison de classes et de styles (v-bind)

La liaison de données consiste à manipuler la liste des classes et les styles CSS inline d'un élément. Puisque class et style sont tous les deux des attributs, nous pouvons utiliser v-bind pour leur attribuer dynamiquement une valeur de chaîne, un peu comme avec les autres attributs. Cependant, essayer de générer ces valeurs à l'aide de la concaténation de chaînes peut être ennuyeux et sujet aux erreurs. Pour cette raison, Vue fournit des améliorations spéciales lorsque v-bind est utilisé avec class et style. En plus des chaînes, les expressions peuvent également évaluer des objets ou des tableaux
Documentation officielle

Rendu conditionnel (v-if, v-else, etc.)

La directive v-if est utilisée pour restituer conditionnellement un bloc. Le bloc ne sera rendu que si l'expression de la directive retourne une valeur évaluée à vrai.
Documentation officielle

Rendu de liste (v-for)

Nous pouvons utiliser la directive v-for pour rendre une liste d'items basée sur un tableau. La directive v-for nécessite une syntaxe spéciale de la forme item in items, où items est le tableau de données source et item est un alias pour l'élément du tableau sur lequel on itère.
Documentation officielle

Gestion d'événement

Nous pouvons utiliser la directive v-on, que nous raccourcissons généralement par le symbole @, pour écouter les événements DOM et exécuter du JavaScript lorsqu'ils sont déclenchés. L'utilisation serait alors v-on:click="handler" ou avec le raccourci, @click="handler".
Documentation officielle

On continue l'atelier...
De retour dans Timeline.vue on va travailler les directives v-for, v-bind et v-on

Dans script

• on va faire une constante de périodes:

  const periods = ["Aujourd'hui", "Cette semaine", "Ce mois"] //même pas besoin de la typer :P

Dans template

• On va appeler cette constante avec {{ periods }}
• On va utiliser la première directive v-for
• Format: v-for="element of elements"
• Vous remplacez le <a href="#">Aujourd'hui</a> existant
• Dans le code, ça va ressembler à:

  <a href="#" v-for="period of periods">
  {{ period }}
  </a>

• On va ajouter un v-bind qui va donner une clé unique à notre boucle: v-bind:key="uniqueKey"
  Notre ligne va devenir:

  <a href="#" v-for="period of periods" v-bind:key="period">

  Parfois la syntaxe est :key="period" (v-bind est sous-entendu)

On va ajouter un événement avec v-on.

• La syntaxe est: v-on:event="nomFonction"
• Donc, si on veut un onclick ce sera v-on:click
  • nomfonction sera le nom de la fonction appelée dans la partie script
• Le code à ajouter est celui-ci:

  v-on:click="selectPeriod(period)"

  On peut utiliser @click à la place de v-on:click!

De retour dans script

• On va faire la fonction selectPeriod: Le paramètre sera un string

  function selectPeriod(period: string) {
  console.log(period) //on va logguer pour tester
  }

• On va utiliser une variable pour obtenir la journée sélectionnée:

  let selectedPeriod = "Aujourd'hui"

• On va ajouter à notre fonction selectPeriod:

  selectedPeriod = period

• On va utiliser la nouvelle variable dans notre template:

  {{ selectedPeriod }}

• Faire un test en live en cliquant sur les éléments, ça ne marchera pas!

• On va devoir ajouter de la réactivité à notre application!

• Pour ce faire on doit importer une librairie dans notre composant avec ce code:

  import { ref } from "vue"

• Ensuite changer la ligne:

  let selectedPeriod = "Aujourd'hui"

• Pour:

  let selectedPeriod = ref("Aujourd'hui")

  La variable va devenir réactive, mais elle ne sera plus un string...!

• Aller changer la ligne pour avoir que la valeur de selectedPeriod:

  selectedPeriod = period

• pour:

  selectedPeriod.value = period

Dans template

• On va rendre notre application plus intéressante visuellement
• En ajoutant une classe "bg-primary" sur l'élément actif:
  • class="bg-primary"
• Pour rendre active seulement celle sélectionnée on va utiliser un v-bind conditionnel:
  • v-bind:class="{ 'bg-primary': period === selectedPeriod}"
  • :class fonctionne aussi et est plus court!
• Aller tester live si tout marche bien!

Remise

Aucune remise pour cet atelier, mais conservez-le car on va s'en servir pour l'exercice au prochain cours!