Qu'est-ce que Vue.js ?

Vue.js est un framework permettant de créer des interfaces utilisateur web (HTML, CSS, Javascript/TypeScript), en adoptant une approche orientée composants.

Il est en général utilisé pour créer des applications web monopage aussi appelées Single-Page Application (SPA). Les SPA se distinguent des pages web classiques dans le sens où elles permettent de fournir à l'utilisateur une interface telle qu'on la trouverait dans une application "de bureau" : les interactions avec la SPA se font sans rechargement global de la page web.

Pourquoi utiliser un tel Framework ?

Tout d'abord parce que les applications web modernes sont en général proposées aux utilisateurs sous forme de SPA, et Vue.js facilite grandement la création de telles applications.

D'une manière générale, Vue.js facilite la mise en place de mécanismes qui sont souvent plus lourds à réaliser en Javascript / JQuery.

Prenons un exemple : vous qui êtes maintenant des pros du Javascript (cf. super_cours), essayez de réaliser une page contenant l'exemple ci-dessous en Javascript (sans Vue.js).

Spoiler: avec Vue.js, c'est bcp plus simple :))

Create app

Notions Requises

Énoncé

Créer une application Vue de type SFCs (Single-File Components).

Supprimer les composants générés et remplacer par ex01_app.vue.

<template>
<div class="ex01-app">
    <h1>HELLO WORLD</h1>
</div>
</template>

<style scoped>
.ex01-app {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

Mustach

Notions Requises

Énoncé

Créez un composant qui à partir de la déclaration :

const message = "HELLO WORLD"

Ref & Reactive

Notions Requises

Énoncé

Créez un composant qui à partir de la déclaration :

    const message = ref()
    const time = reactive({
        hours: "??",
        minutes: "??",
        seconds:"??"
    })

Events

Notions Requises

Énoncé

Créez un composant qui à partir de la déclaration :

    const time = reactive({
        hours: "??",
        minutes: "??",
        seconds:"??"
    })

Class & Style

Notions Requises

Énoncé

Transformer l'exercice précédent pour qu'il permette un Start/Stop classieux !

Puis (SANS v-if et v-show) :

If & Show

Notions Requises

Énoncé

• Réalisez la page suivante avec v-if.

• Réalisez ensuite une seconde version avec v-show.
• Faites ensuite une 3ème version sans v-if ou v-show, mais avec une classe dynamique qui simule ce que fait en réalité v-show.

Form Inputs

Notions Requises

Énoncé

Recréez les composants suivants.

Computed

Notions Requises

Énoncé

Réalisez la page suivante avec computed : type indique si message est plus court/long que la valeur de shortLimit.

For

Notions Requises

Énoncé

A partir de la déclaration :

const weather_forecasts = [
    { day: 'monday', weather: 'fog'},
    { day: 'tuesday', weather: 'clouds'},
    { day: 'wednesday', weather: 'rain'},
    { day: 'friday', weather: 'storm'},
    { day: 'sunday', weather: 'armageddon'},
    { day: 'thursday', weather: 'ice'},
    { day: 'saturday', weather: 'snow'},
]

Créez le composant ex13_for.vue qui affiche les prévisions météo comme ci-après.

• Un click sur le bouton More Sun ensoleille la prévision météo d'un jour pris au hasard parmi les jours qui n'ont pas encore de soleil (!).
  (En d'autres termes, il ne doit pas y avoir de click 'blanc', c'est à dire qu'on ne doit pas tenter de mettre du soleil dans un jour déjà ensoleillé).
• La prévision d'un jour ensoleillé se pare d'une magnifique couleur doréé.
• Lorsque tous les jours ont été ensoleillés, le bouton More Sun doit être désactivé.

Conseil : pensez Vue.js !

Énoncé

En utilisant le fichier sample_countries.js , réalisez la page ci-dessous.

import { countries } from "../js/sample_countries.js"; // NB: mettre votre chemin

Watch (+tpl ref)

Notions Requises

Énoncé

Dans ex15_watch_tmpl_ref.vue, les watchers sont utilisés pour :

• Rendre les propriétés kg et g interdépendantes, c.a.d. que la modification de l'une, entraine la mise à jour de l'autre : il ne s'agit donc pas de faire un computed "classique" car la dépendance qui nous intéresse ici est bidirectionnelle.
  (NB: ...bon ...il serait en fait possible de le faire avec un computed + des accesseurs, mais ce n'est pas le sujet ici ;) ).
• Déclencher l'apparition d'un message (uniquement) lorsque la valeur de la propriété message (qui est lui-même computed !) a changé.
  La valeur de message est calculée comme suit :

  return kg.value < 100 ? "Trop léger..." : "Wow, c'est lourd !"

  ATTENTION : Le "flash" (apparition/disparition) du message doit être ici (pour le fun) réalisé sans utiliser une bibliothèque comme JQuery, en récupérant dynamiquement la référence sur l'élément HTML (cf. Template Reference) qui contient le message, puis en faisant varier son opacity.

Lifecycle

Notions Requises

Énoncé

Créez la démo ci-dessous qui utilise la classe Modal de Bootstrap.

La création d'un objet de type Modal nécessite de récupérer l'élément html qui définit le contenu de la boite de dialogue.

On ne peut récupérer un élément html avant que la page ne soit complètement chargée (ou on risque de récupérer un élément vide).

La solution consiste ici à récupérer l'élément html de la boite de dialogue (et créer l'instance de Modal) seulement après le chargement du composant vue, c'est à dire dans la méthode onMounted.

TP01

Énoncé

Réalisez le composant ci-dessous (pour l'instant en 1 seul gros composant).