Vue : construire une application web (école d'ingénieur) · Chapitre 1 · Application directe du cours
Page blanche
Premiers pas avec Vue · niveau 1 (application)
Énoncé
Cette page affiche Panier : {{ nombre }} article(s), accolades comprises. Le fichier app.js est pourtant correct. Que dit la console ? Corriger la page.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page blanche ?</title>
<link rel="stylesheet" href="../../exemple.css">
<script src="app.js"></script>
<script src="https://unpkg.com/vue@3.5.43/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Panier : {{ nombre }} article(s)</p>
</div>
</body>
</html>Corrigé
La console indique :
Uncaught ReferenceError: Vue is not defined
Panier : {{ nombre }} article(s)app.js est chargé avant Vue et sans defer : il s'exécute immédiatement, quand l'objet global Vue n'existe pas encore, et s'arrête sur la première ligne. Le gabarit n'est jamais monté, d'où les accolades. On charge Vue d'abord, et app.js avec defer (il s'exécutera aussi après l'analyse du <body>, quand #app existe) :
<script src="https://unpkg.com/vue@3.5.43/dist/vue.global.js"></script>
<script src="app.js" defer></script>La page corrigée (code/ch1/exercices/ex2-ordre/) affiche :
Panier : 0 article(s)100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.