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

Depuis la console

Premiers pas avec Vue · niveau 3 (difficile)

Énoncé

L'application suivante affiche « 1 × 32 € ». On tape successivement dans la console vm.nombre = 3, puis vm.prix = 40, puis vm.nombre = 4. Prédire le texte du paragraphe après chaque commande, et expliquer.


const { createApp, ref } = Vue;

const vm = createApp({
  setup() {
    const nombre = ref(1);
    const prix = 32;
    return { nombre, prix };
  },
}).mount("#app");

console.log(vm.nombre, vm.prix);

Corrigé

La console affiche d'abord 1 32, puis le paragraphe après chaque commande :


1 32
> vm.nombre = 3
3 × 32 €
> vm.prix = 40
3 × 32 €
> vm.nombre = 4
4 × 40 €

nombre est une ref : l'écrire déclenche un rendu. prix est une constante ordinaire : vm.prix = 40 change bien la valeur que lira le prochain rendu, mais rien ne prévient Vue, et la page garde « 32 ». Le rendu suivant, provoqué par le changement de nombre, relit les deux valeurs et affiche enfin 40. La page est alors juste, mais par hasard : une donnée qui change doit être une ref.

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 →