Vue : construire une application web (école d'ingénieur) · Chapitre 1 · Exercice de TD

De l'API d'options à l'API de composition

Premiers pas avec Vue · niveau 2

Énoncé

Récrire avec setup et ref cette application, sans changer son gabarit (un paragraphe {{ titre }} : {{ stock }} en stock et un bouton « Réserver » désactivé quand le stock est nul, qui appelle reserver).


// L'énoncé : l'application écrite avec l'API d'options.
const { createApp } = Vue;

createApp({
  data() {
    return { titre: "Analyse MPSI", stock: 2 };
  },
  methods: {
    reserver() {
      if (this.stock > 0) {
        this.stock--;
      }
    },
  },
}).mount("#app");

Corrigé


const { createApp, ref } = Vue;

createApp({
  setup() {
    const titre = "Analyse MPSI";
    const stock = ref(2);

    function reserver() {
      if (stock.value > 0) {
        stock.value--;
      }
    }

    return { titre, stock, reserver };
  },
}).mount("#app");

Après deux clics, le paragraphe, puis l'état du bouton :


Analyse MPSI : 0 en stock
true

Chaque entrée de data qui change devient une ref ; le titre, constant, reste une simple constante. Chaque méthode devient une fonction ordinaire, qui écrit stock.value là où l'ancienne écrivait this.stock. Tout ce que le gabarit utilise est renvoyé par setup.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →