<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <b><i><span style= 'font-size:15.0pt;font-family:"Times New Roman",serif; color:#08090A'> Remarque</span></i></b></p> <p class="MsoNormal"><i><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ce tutoriel est plus un récapitulatif des possibilités de Vue js. Pour un cours plus complet vous pouvez aller à cette adresse :</span></i> <a href= "https://v3.vuejs.org/guide/introduction.html"><i><span style= 'font-size: 12.0pt;font-family:"Times New Roman",serif'>guide Vue.js 3</span></i></a></p> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <b><i><span style= 'font-size:15.0pt;font-family:"Times New Roman",serif; color:#08090A'> Extensions VisualStudioCode pour être productif avec Vue</span></i></b></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal" style='color:#08090A'><b><i><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Vetur</span></i></b> <i><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif'>: Outils d'aide à coder comme la coloration syntaxique, le formating, intelliSense, Emmet, etc.</span></i></li> <li class="MsoNormal" style='color:#08090A'><i><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Vue VsCode Snippets : Raccourci clavier pour ajouter des snippets dans votre code</span></i></li> </ul> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></b></p> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Quel que soit le navigateur utilisé, il est impératif durant la phase de développement, d'afficher la console web.</span></b></p> <p class="MsoNormal"><span style= 'font-family:"Arial",sans-serif'> </span></p> <p class="MsoNormal"><b><u><span style= 'font-size:16.0pt;font-family:"Times New Roman",serif; color:#1F4E79'> Qu'est ce que Vue.js ?</span></u></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Vue.js est un framework progressif pour JavaScript utilisé pour créer des interfaces Web et des applications d'une page (SPA). Vue.js peut également être utilisé pour le développement d'applications de bureau et mobiles avec les frameworks Ionic et Electron.</span></p> <p class="MsoNormal"><b><u><span style= 'font-size:16.0pt;font-family:"Times New Roman",serif; color:#1F4E79'> Pourquoi utiliser Vue.js ?</span></u></b></p> <p class="MsoNormal" style= 'margin-right:-21.35pt;margin-bottom:6.0pt'><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Avant d’utiliser un framework il est important de comprendre dans quel contexte il s’avère le bon outil.</span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Voici donc la liste des différentes raisons qui pourraient justifier l’utilisation d’un framework comme Vue.js</span></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Organisation de votre code</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Efficacité/rapidité de développement</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Réutilisabilité du code</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>Maintenance et développement évolutif</span></li> </ul> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><a name="pourquoi-vuejs" id= "pourquoi-vuejs"></a><a name= "extensions-vscode-pour-%C3%AAtre-product"></a><a name= "comment-utiliserinstaller-vuejs" id= "comment-utiliserinstaller-vuejs"></a><b><u><span style= 'font-size:16.0pt; font-family:"Times New Roman",serif;color:#1F4E79'>Comment Utiliser/installer Vue.js</span></u></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Vue est un framework dit progressif. Vous pouvez l’utiliser juste dans une petite partie de votre page web ou si vous préférez vous pouvez construire une application entière avec Vue.js.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Il y a 4 possibilités "<i>d'installer</i>" vue js dans vos applications :</span></p> <p class="MsoNormal" style= 'margin-top:4.0pt;margin-left:35.7pt;text-indent:-17.85pt; background:white'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#2C3E50'> 1.<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#2C3E50'> Importez-le en tant que </span><span style= 'color:black'><a href= "https://v3.vuejs.org/guide/installation.html#cdn"><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#3EAF7C'>package CDN</span></b></a></span><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#2C3E50'> sur la page (ce sera la solution choisie ici).</span></p> <ol start="2" type="1"> <li class="MsoNormal" style='color:#2C3E50;background:white'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif'>Téléchargez les fichiers JavaScript et </span><span style= 'color:black'><a href= "https://v3.vuejs.org/guide/installation.html#download-and-self-host"><b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#3EAF7C'>hébergez-les vous-même</span></b></a></span><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>.</span></b></li> </ol> <p class="MsoNormal" style= 'margin-bottom:6.0pt;margin-left:35.7pt;text-indent: -17.85pt;background:white'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#2C3E50'> 3.<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#2C3E50'> Installez-le en utilisant <a href= "https://v3.vuejs.org/guide/installation.html#npm"><span style= 'color: #3EAF7C'>npm</span></a>.</span></p> <p class="MsoNormal"><i><span style= 'font-family:"Times New Roman",serif; color:#222222;background:#F8F8F8'> La CLI suppose une connaissance préalable de Node.js et des outils de génération associés. Nous allons donc utiliser vue js avec un lien CDN dans un 1<sup>er</sup> temps. Nous utiliserons l'outil CLI dans un 2nd temps pour la création "d'application entière".</span></i></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Voici ce que l'on fera pour utiliser Vue seulement dans une partie de notre page web :</span></p> <p class="MsoNormal" style= 'margin-top:4.0pt;margin-right:0cm;margin-bottom:0cm; margin-left:14.2pt;margin-bottom:.0001pt;text-indent:-14.2pt'> <span style= 'font-size:10.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Ajouter un tag 'script' qui contient un lien vers la librairie Vue.js</span></p> <p class="MsoNormal" style= 'margin-left:14.2pt;text-indent:-14.2pt'><span style= 'font-size:10.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Ajouter un autre tag 'script' qui contient un lien vers notre fichier application Vue (app.js)</span></p> <p class="MsoNormal" style= 'margin-left:14.2pt;text-indent:-14.2pt'><span style= 'font-size:10.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Créer une div avec id="app" qui servira de conteneur au rendu de notre application Vue.</span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><b><u><span style= 'font-size:16.0pt;font-family:"Times New Roman",serif; color:#1F4E79'> Support du cours "Le jeu de moutons"</span></u></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> <img border="0" width="203" height="268" id="Image 1" src= "SupportDeCours_VueJS_fichiers/image001.png" alt="image" name= "Image 1" /></span><span style= 'font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> <img border="0" width="203" height="271" id="Image 11" src= "SupportDeCours_VueJS_fichiers/image002.png" alt="image" name= "Image 11" /></span></p> <p class="MsoNormal"><span style= 'font-size:8.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Le but du jeu est de réussir à cliquer sur le loup "qui se balade" dans la grille.</span></p> <p class="MsoNormal"><span style= 'font-size:8.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:8.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><b><span style= 'font-size:18.0pt;font-family:"Times New Roman",serif; color:#08090A'> Créer une instance de Vue.js</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Il existe 2 solutions pour utiliser vue.js :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-top:3.0pt;margin-right:0cm; margin-bottom:0cm;margin-left:35.7pt;margin-bottom:.0001pt;text-indent:-17.85pt'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> 1.<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Télécharger vue et l'ajouter à notre projet.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-top:6.0pt;margin-right:0cm; margin-bottom:0cm;margin-left:35.7pt;margin-bottom:.0001pt;text-indent:-17.85pt'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> 2.<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Utiliser CDN. La librairie sera accessible à distance et héberger sur un serveur distant. Cette solution est plus pratique mais nécessite une connexion internet fiable.</span></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Dans ce cours nous allons utiliser la <i>méthode CDN</i>.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Découverte de vue.js :</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Fichier html (view1.html) :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <meta charset="utf-8"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <title>Cours Vue.js</title></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b><</b>div <b>id="app">{{ msg }}</b></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel1.js"></script></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Création du fichier javascript (viewModel1.js) :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> msg: "Hello world !"</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div ayant l'id "app"</span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:8.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 1 : Lier une valeur du modèle à une valeur d'attribut de la vue</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Créer la grille (5*5) permettant d'afficher les moutons et un loup placé aléatoirement.</span></p> <p class="MsoNormal" align="center" style='text-align:center'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A; border:solid windowtext 1.0pt;padding:0cm'> <img border="0" width="190" height="208" id="Image 4" src= "SupportDeCours_VueJS_fichiers/image003.png" alt="image" name= "Image 4" /></span><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>ou <span style= 'border:solid windowtext 1.0pt;padding:0cm'><img border="0" width= "187" height="208" id="Image 5" src= "SupportDeCours_VueJS_fichiers/image004.png" alt="image" name= "Image 5" /></span> ou <span style= 'border:solid windowtext 1.0pt;padding:0cm'><img border="0" width= "190" height="209" id="Image 6" src= "SupportDeCours_VueJS_fichiers/image005.png" alt="image" name= "Image 6" /></span></span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> <span style='text-decoration:none'> </span></span></u></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : v-bind.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Fichier html ("view2.html") :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <meta charset="utf-8"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <title>Cours Vue.js - 2</title></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <style></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .plateau {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> display: grid;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> grid-template-columns: 100px 100px 100px 100px 100px;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </style></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[0] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[1] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[2] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[3] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[4] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[5] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[6] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[7] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[8] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[9] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[10] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[11] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[12] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[13] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[14] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[15] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[16] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[17] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[18] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[19] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[20] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[21] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[22] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[23] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="cellule"><img <b>v-bind:</b>src=cases[24] height="100" width="100"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel2.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Fichier javascript ("viewModel2.js") :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Attraper le loup !",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>cases: []</b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>methods: {</b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>beforeMount()</b>{</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>this.</b>cases[i] = "./images/mouton.png";</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>this.</b>cases[<b>this.</b>getRandomInt(0,24)] = "./images/loup.png";</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications</span></u> <span style= 'font-size:12.0pt;font-family: "Times New Roman",serif;color:#08090A'> :</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le html:</span></p> <p class="MsoNormal" style='margin-left:21.3pt'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> La directive <b>v-bind</b>:, placé dans le document html, permet ici de relier l'attribut src de l'image avec la valeur du modèle, en l'occurrence avec un élément du tableau cases.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoNormal" style='margin-left:1.0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Dans <i><b>methods</b></i>, on créé nos propres fonctions. Ici getrandomInt(<i>param1</i>, <i>param2</i>) permet de retourner un nombre aléatoire situé entre 0 et 24.</span></p> <p class="MsoNormal" style='margin-left:1.0cm'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount()</span></b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>permet de placer des instructions javascript qui seront exécutées avant le <i>montage</i> de l'application Vue.</span></p> <p class="MsoNormal" style='margin-left:1.0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Il est impératif d'utiliser <i>this</i> quand on utilise une donnée ou méthode du modèle, dans le modèle lui même.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 2 : Afficher du html du modèle dans la vue</span></b></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family: "Times New Roman",serif;color:#08090A'> : Toujours le même affichage mais en simplifiant le fichier html.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : v-html</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Attraper le loup !",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>cases: [],</b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> </span></b> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>"</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>methods: {</b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>beforeMount()</b>{</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>this.</b>cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <b>this.</b>cases[<b>this.</b>getRandomInt(0,24)] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><div class='cellule' v-html='cases[0]'></div></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> .</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> .</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> .</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <div class='cellule' v-html='cases[24]'></div></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> …</span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 3 : Faire bouger le loup toutes les secondes</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Déplacer le loup toutes les secondes dans la grille.</span></p> <p class="MsoNormal" align="center" style='text-align:center'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A; border:solid windowtext 1.0pt;padding:0cm'> <img border="0" width="190" height="208" id="Image 3" src= "SupportDeCours_VueJS_fichiers/image006.png" alt="image" name= "Image 3" /></span><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> puis <span style= 'border:solid windowtext 1.0pt;padding:0cm'><img border="0" width= "187" height="208" id="Image 7" src= "SupportDeCours_VueJS_fichiers/image007.png" alt="image" name= "Image 7" /></span> puis <span style= 'border:solid windowtext 1.0pt;padding:0cm'><img border="0" width= "190" height="209" id="Image 8" src= "SupportDeCours_VueJS_fichiers/image008.png" alt="image" name= "Image 8" /></span></span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> <span style='text-decoration:none'> </span></span></u></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : la fonction setInterval.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Attraper le loup !",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> cases: [],</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> numCaseLoup : 0</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>this.numCaseLoup = this.getRandomInt(0,24);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.cases[this.numCaseLoup] = this.caseLoup;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>setInterval(this.deplaceLoup, 1000);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>deplaceLoup() {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.cases[this.numCaseLoup] = this.caseMouton;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.numCaseLoup = this.getRandomInt(0,24);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.cases[this.numCaseLoup] = this.caseLoup;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Aucune modification à effectuer dans le fichier html.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans data(), ajout d'une valeur <i>numCaseLoup</i>. Celle-ci contiendra le numéro de la case contenant le loup.</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Création de la méthode <i>"deplaceLoup()"</i> qui permet de mettre un mouton dans la case -contenant le loup et de placer un loup aléatoirement dans une autre case de la grille.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans beforeMount, on place la fonction setInterval. Celle-ci lance la fonction <i>deplaceLoup()</i> toutes les secondes. Et entraine donc le déplacement du loup à intervalle d'une seconde.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 4 : Compter le nombre de clics sur la grille</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Compter le nombre de fois que l'utilisateur clique sur la grille pour essayer d'attraper le loup.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : Gestion des évènements avec Vue js.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> <b><span style='color:red'>titre: "Le loup est a la case : ",</span></b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> cases: [],</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> numCaseLoup : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> <b><span style='color:red'>nbEssai : 0</span></b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> setInterval(this.deplaceLoup, 1000);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> deplaceLoup() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.cases[this.numCaseLoup] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> <b><span style='color:red'>attraper() {</span></b></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.nbEssai++;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>});</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>// mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[0]'</span> <b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:red'>@click="attraper"</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[1]'</span> <b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:red'>@click="attraper"</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[24]'</span> <b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:red'>@click="attraper"</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <span>Vous avez essayé : {{ nbEssai }} fois !</span></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel5.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On modifie le titre pour afficher la position du loup.</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'un évènement (ici le clic => @click ou v-on:click) sur les div des cellules. Au clic on lance la fonction <i>attraper</i>.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'un span pour afficher le nombre de clics effectués.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification de la valeur titre dans data().</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'une valeur <i>nbEssai</i> dans data().</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Création de la méthode <i>attraper</i>. Celle-ci va compter le nombre de clics.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 5 : Arrêter le jeu et mettre une image "<i>OK</i>" quand le loup est attrapé</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Détecter quand l'utilisateur clique sur le loup et mettre l'image OK.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : Passer des valeurs en arguments d'une méthode avec les évènements.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Le loup est a la case : ",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> cases: [],</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>caseAttrape: "<img src='./images/ok.png' height='100' width='100'>",</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> numCaseLoup : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> nbEssai : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>interval : '',</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>this.interval = setInterval(this.deplaceLoup, 1000);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> deplaceLoup() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> attraper(numCaseClique) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.nbEssai++;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>if (numCaseClique == this.numCaseLoup)</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.cases[this.numCaseLoup] = this.caseAttrape;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> clearInterval(this.interval);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[0]' @click="</span><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>attraper(0)</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[1]' @click="</span><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>attraper(1)</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-html='cases[24]' @click="</span><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>attraper(24)</span></b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'>"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span>Vous avez essayé : {{ nbEssai }} fois !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel6.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraph" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute en paramètre effectif de la méthode <i>attraper</i> le numéro de la case.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'une valeur caseAttrape dans data(). Celle-ci va contenir le code html de l'affichage de l'image OK.png.</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'une valeur <i>interval</i> dans data().</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On affecte à la valeur <i>interval</i> le <i>setInterval(…).</i> Le setInterval sera toujours lancé mais aussi affecté à cette valeur <i>interval</i>.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On modifie la méthode <i>attraper</i> en lui ajoutant un paramètre (numéro de la case sur laquelle on a cliqué) et en ajoutant le test permettant de contrôler si le numéro de la case loup correspond au numéro de la case cliquée. Si c'est le cas, on remplace l'image du loup par l'image ok dans cette case et on arrête l'interval (=> le loup <i>ne bouge plus</i>)..</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 6 : Afficher un message conditionnel</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Si l'utilisateur clique sur un mouton, afficher le message "Le loup court toujours !" et si l'utilisateur clique sur le loup, afficher le message "Bien joué vous avez attrapé le loup !".</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : La directive v-if et v-else.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Le loup est a la case : ",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> cases: [],</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseAttrape: "<img src='./images/ok.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> numCaseLoup : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> nbEssai : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> interval : '',</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>attrape : false,</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.interval = setInterval(this.deplaceLoup, 1000);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> deplaceLoup() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> attraper(numCaseClique) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.nbEssai++;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> if (numCaseClique == this.numCaseLoup)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseAttrape;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>this.attrape = true;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> clearInterval(this.interval);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span>Vous avez essayé : {{ nbEssai }} fois !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><span v-if="attrape">Bien joué vous avez attrapé le loup !</span></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <span v-else>Le loup court toujours !</span></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel7.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraph" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute 2 span. Le 1<sup>er</sup> affiche "Bien joué…" si attrape = true (v-if="attrape").<br /> Le second affiche "Le loup court toujours !" dans le cas contraire.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Ajout d'une valeur <i>attrape</i> dans data(). Celle-ci est initialisée à false.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans la méthode <i>attraper</i> on affecte la valeur true à <i>attrape</i> si la case cliquée est la bonne.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 7 : Améliorer le code html pour afficher la grille en une seule ligne</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Afficher la grille en une ligne au lieu des 25 actuellement (<div class='cellule' v-html='cases[0]'></div>. . .<div class='cellule' v-html='cases[24]'></div>).</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : La directive v-for.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Pas de modification du modèle.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><div class="plateau"></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <div class='cellule' v-for="(currentCase, i) in cases" v-html='currentCase' @click="attraper(i)"></div></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> </div></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span>Vous avez essayé : {{ nbEssai }} fois !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-if="attrape">Bien joué vous avez attrapé le loup !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-else>Le loup court toujours !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel8.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraph" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> La directive "<i>v-for</i>" permet de parcourir chaque élément du tableau cases. Chaque élément est récupéré dans currentCase et <i>i</i> récupère l'ordre de passage (0 pour le 1<sup>er</sup> tour de boucle, 1 pour le 2<sup>ème</sup>, … , 24 pour le 25ème).</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Pas de modification dans le modèle.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 8 : Ajouter un bouton <i>Démarrer</i> et pouvoir régler la vitesse de déplacement du loup</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Permettre à l'utilisateur de démarrer et arrêter le jeu à l'aide d'un bouton.<br /> Régler la vitesse de déplacement du loup à l'aide d'un "slider".</span></p> <p class="MsoNormal" align="center" style= 'margin-left:49.65pt;text-align:center; text-indent:-49.65pt'> <span style= 'position:absolute;z-index:251659264; left:0px;margin-left:203px;margin-top:21px;width:147px;height:40px'> <img width="147" height="40" src= "SupportDeCours_VueJS_fichiers/image009.png" alt= "image" /></span><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><img border="0" width="199" height="264" id="Image 9" src= "SupportDeCours_VueJS_fichiers/image010.png" alt="image" name= "Image 9" /></span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : La directive v-model ("lien bidirectionnel").</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Le loup est a la case : ",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> cases: [],</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseMouton: "<img src='./images/mouton.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseLoup: "<img src='./images/loup.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> caseAttrape: "<img src='./images/ok.png' height='100' width='100'>",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> numCaseLoup : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> nbEssai : 0,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> interval : '',</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> attrape : false,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> demarre : false,</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> vitesse : 1000,</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> for (var i=0; i<25; i++)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[i] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>/* Ligne supprimée</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.interval = setInterval(this.deplaceLoup, 1000);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> */</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> deplaceLoup() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> attraper(numCaseClique) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.nbEssai++;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> if (numCaseClique == this.numCaseLoup)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseAttrape;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.attrape = true;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> clearInterval(this.interval);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>demarrer() {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> if (this.demarre)</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> clearInterval(this.interval);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.demarre = false;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> else</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.interval = setInterval(this.deplaceLoup,</span></b> <b><u><span style= 'font-size:14.0pt; font-family:"Times New Roman",serif;color:red'>this.vitesse</span></u></b><b><span style='font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>);</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> this.demarre = true;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt; margin-left:0cm;margin-right:-21.35pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> …</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><input type="button" :value="demarre ? 'Arreter' : 'Demarrer'" @click="demarrer" /></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <br></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <br></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <input type="text" v-model="vitesse" /></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> <input type="range" min="100" max="2000" v-model="vitesse"/></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-for="(currentCase, i) in cases" v-html='currentCase' @click="attraper(i)"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> …</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute d'abord un bouton qui prendra la valeur "Arreter" ou "Demarrer" suivant la valeur de l'élément <i>demarre</i> du modèle.<br /> L'expression javascript "demarre ? 'Arreter' : 'Demarrer'" signifie si <i>demarre</i> est à vrai alors le bouton prendra la valeur 'Arreter' sinon la valeur 'Demarrer'.<br /> On ajoute également l'évènement click sur ce bouton (@click). Le clic lancera la fonction <i>demarrer</i> du modèle.</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute ensuite un champ texte que l'on relie, de façon bidirectionnelle, à la propriété vitesse du modèle. => si <i>vitesse</i> évolue dans le modèle cela se répercute dans le html et inversement.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute enfin un "slider", c’est-à-dire un input de type range. Celui-ci sera également relié de façon bidirectionnelle à la propriété <i>vitesse</i> du modèle.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans data() on ajout une valeur <i>demarre</i> que l'on initialise à false et une valeur <i>vitesse</i> que l'on initialise à 1000.</span></p> <p class="MsoListParagraphCxSpMiddle" style= 'margin-left:35.45pt;text-indent: -18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On supprime la ligne "</span><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif'>this.interval = setInterval(this.deplaceLoup, 1000);".de <i>beforeMount</i>.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif'>On ajoute la méthode <i>demarrer</i> qui va arrêter le déplacement du loup si la valeur <i>demarre</i> est à true et lancer le déplacement si la valeur <i>demarre</i> est à false.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 9 : Mettre des "styles dynamiques"</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Encadrer le nombre d'essais effectués, en rouge lorsque l'utilisateur essaye de cliquer sur le loup et en vert quand il a réussi.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : Les styles dynamiques .</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> titre: "Le loup est a la case : ",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> vitesse : 1000,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>essai : false,</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> getRandomInt(min, max) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> return Math.floor(Math.random() * (max - min)) + min;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> deplaceLoup() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseMouton;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.numCaseLoup = this.getRandomInt(0,24);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseLoup;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> attraper(numCaseClique) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.nbEssai++;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>this.essai = true;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> if (numCaseClique == this.numCaseLoup)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.cases[this.numCaseLoup] = this.caseAttrape;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> this.attrape = true;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> clearInterval(this.interval);</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt; margin-left:0cm;margin-right:-21.35pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <meta charset="utf-8"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <title>Cours Vue.js - 2</title></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <style></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .plateau {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> display: grid;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> grid-template-columns: 100px 100px 100px 100px 100px;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>.red {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> border: 3px solid red;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> .green {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> border: 3px solid green;</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </style></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="button" :value="demarre ? 'Arreter' : 'Demarrer'" @click="demarrer" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="text" v-model="vitesse" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="range" min="100" max="2000" v-model="vitesse"/></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-for="(currentCase, i) in cases" v-html='currentCase' @click="attraper(i)"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span</span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>:class="{red: essai, green: attrape}"</span></b> <span style= 'font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> >Vous avez essayé : {{ nbEssai }} fois !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-if="attrape">Bien joué vous avez attrapé le loup !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-else>Le loup court toujours !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> …</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute 2 styles. .red pour définir un encadré rouge et green pour un encadré vert.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le span dans lequel on affiche le message "Vous avez essayé…" on ajoute un <i>:class</i> permettant de définir un style red si <i>essai</i> est à true ou green si <i>attrape</i> est à true. Si les 2 sont à true alors l'encadré vert "écrase" l'encadré rouge.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraphCxSpFirst" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute une valeur <i>essai</i> dans data(). Celle-ci est initialisée à false.</span></p> <p class="MsoListParagraphCxSpLast" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans la méthode <i>attraper</i> on ajoute l'instruction "this.essai = true".</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> Etape 10 : Mettre des "styles dynamiques" avec un objet et sans CSS</span></b></p> <p class="MsoNormal" style= 'margin-left:49.65pt;text-indent:-49.65pt'><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Objectif</span></u> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'> : Afficher le texte "Vitesse : " en : rouge si celle-ci est inférieure ou égale à 500, orange si celle-ci est comprise entre 501 et 1000 et verte si celle-ci est supérieure à 1000.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Principe à découvrir</span></u> <span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> : Les styles dynamiques avec un objet et les <b>propriétés calculées</b>.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier javascript ("viewModel2.js") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> var app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> beforeMount(){</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'>computed: {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> colorieVitesse() {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> if (this.vitesse > 1000)</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> return {color: 'green'};</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> else</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> if (this.vitesse > 500)</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> return {color: 'orange'};</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> else</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> {</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> return {color: 'red'};</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:red'> }</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> });</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> app.mount('#app');</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</span></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Modification du fichier html ("view2.html") pour devenir :</span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> .</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <h1>{{ titre }}{{ numCaseLoup + 1 }}</h1></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="button" :value="demarre ? 'Arreter' : 'Demarrer'" @click="demarrer" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </span> <b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:red'><span :style="colorieVitesse" >Vitesse : </span></span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="text" v-model="vitesse" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <input type="range" min="100" max="2000" v-model="vitesse"/></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class="plateau"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <div class='cellule' v-for="(currentCase, i) in cases" v-html='currentCase' @click="attraper(i)"></div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span :class="{red: essai, green: attrape}" >Vous avez essayé : {{ nbEssai }} fois !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <br></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-if="attrape">Bien joué vous avez attrapé le loup !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <span v-else>Le loup court toujours !</span></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> <script src="./viewModel11.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"Times New Roman",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><u><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Explications :</span></u></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le fichier html :</span></p> <p class="MsoListParagraph" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute un span dans lequel on affiche le message "Vitesse : " on applique le style de la <b>propriété calculée</b> <i>colorieVitesse</i>.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> Dans le modèle :</span></p> <p class="MsoListParagraph" style= 'margin-left:35.45pt;text-indent:-18.0pt'><span style= 'font-size:12.0pt;font-family:Symbol;color:#08090A'>·<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> On ajoute une propriété calculée <i>colorieVitesse()</i>, dans <i>computed:</i>. Dans celle-ci on place les instructions conditionnelles afin de retourner l'objet {color: 'green'} ou {color: 'orange'} ou {color: 'red'} suivant la valeur de <i>this.vitesse</i>.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Il existe encore beaucoup de directives et de fonctionnalités à découvrir avec Vue js mais celle-ci seront abordées en fin d'année.</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 12.0pt;font-family:"Times New Roman",serif;color:#08090A'> Cependant, avec les directives étudiées dans ce cours, vous pourrez déjà concevoir une partie front de votre application web performante et réactive.</span></b></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; color:#08090A'> </span></p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor