<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal" style='margin-bottom:24.0pt'><b><span style= 'font-size:24.0pt; font-family:"Times New Roman",serif'>Apprendre Vue.js 3 - : concepts de base</span></b></p> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <a name="quest-ce-que-vuejs-" id= "quest-ce-que-vuejs-"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Remarque</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",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><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#1F4E79'> https://v3.vuejs.org/guide/introduction.html</span></i></p> <p class="MsoNormal"><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'> Qu’est-ce que Vue.js ?</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",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"><a name="pourquoi-vuejs" id= "pourquoi-vuejs"></a><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Pourquoi Vue.js</span></b></p> <p class="MsoNormal" style= 'margin-right:-21.35pt;margin-bottom:6.0pt'><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",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:"var(--content-font-family)",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:"var(--content-font-family)",serif'>Organisation de votre code</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Efficacité/rapidité de développement</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Réutilisabilité du code</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Maintenance et développement évolutif</span></li> </ul> <p class="MsoNormal"><a name= "extensions-vscode-pour-%C3%AAtre-product"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Extensions VisualStudioCode pour être productif avec Vue</span></b></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal" style='color:#08090A'><b><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Vetur</span></b> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif'>: Outils d'aide à coder comme la coloration</span> <span style= 'font-size: 12.0pt;font-family:"Times New Roman",serif'>syntaxique</span><span style='font-size:12.0pt;font-family:"var(--content-font-family)",serif'>, le formating, intelliSense, Emmet, etc.</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Vue VsCode Snippets : Raccourci clavier pour ajouter des snippets dans votre code</span></li> </ul> <p class="MsoNormal"><a name="comment-utiliserinstaller-vuejs" id= "comment-utiliserinstaller-vuejs"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Comment Utiliser/installer Vue.js</span></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:"var(--content-font-family)",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 class= "MsoHyperlink"><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#3EAF7C'><a href="https://v3.vuejs.org/guide/installation.html#cdn"><span style='color: #3EAF7C'>package CDN</span></a></span></b></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 class= "MsoHyperlink"><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#3EAF7C'><a href="https://v3.vuejs.org/guide/installation.html#download-and-self-host"><span style='color:#3EAF7C'>hébergez-les vous-même</span></a></span></b></span><b><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif'>.</span></b></li> <li class="MsoNormal" style='color:#2C3E50;background:white'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif'>Installez-le en utilisant <a href= "https://v3.vuejs.org/guide/installation.html#npm"><span style= 'color:#3EAF7C'>npm</span></a>.</span></li> <li class="MsoNormal" style='color:#2C3E50;background:white'> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;background: white'> Vue fournit une </span><span class="MsoHyperlink"><span style= 'font-size:12.0pt;font-family:"Times New Roman",serif;color:#3EAF7C; background:white'><a href="https://github.com/vuejs/vue-cli" target="_blank"><span style='color:#3EAF7C'>CLI officielle </span><span class="sr-only"><span style= 'color:#3EAF7C;border:none windowtext 1.0pt; padding:0cm;text-decoration:none'>(ouvre une nouvelle fenêtre)</span></span></a></span></span> <span style= 'font-size:12.0pt;font-family:"Times New Roman",serif; background:white'> pour un échafaudage rapide d'applications monopages ambitieuses.</span></li> </ol> <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.</span></i></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",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:35.7pt;margin-bottom:.0001pt;text-indent:-17.85pt'> <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:"var(--content-font-family)",serif; color:#08090A'> Ajouter un tag 'script' qui contient un lien vers la librairie 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:"var(--content-font-family)",serif'>Ajouter un autre tag 'script' qui contient un lien vers notre fichier application Vue (app.js)</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>Créer une div avec id="app" qui servira de conteneur au rendu de notre application Vue.</span></li> </ul> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></p> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Remarque :</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> <h1 style= 'margin-top:36.0pt;margin-right:0cm;margin-bottom:12.0pt;margin-left: 1.0cm;text-indent:-1.0cm;page-break-after:avoid'> <a name="node0" id="node0"></a><span style= 'font-size:20.0pt; font-family:"Arial",sans-serif'>A.<span style= 'font:7.0pt "Times New Roman"'> </span></span> <span style= 'font-size:20.0pt;font-family:"Arial",sans-serif'>UTILISATION VUE JS SANS OUTIL DE DEVELOPPEMENT</span></h1> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Voici un exemple d'une page utilisant Vue.js</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> (index.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:"var(--ff-monospace)",serif;color:#08090A'> <html></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <title>Ma page Vue.js</title></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </head></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div id="app"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <script src="https://unpkg.com/vue@next"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <script src="./app.js"></script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </body></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </html></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> (app.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:"var(--ff-monospace)",serif;color:#08090A'> // fonction qui permet d'initialiser Vue.js</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> const vm = Vue.createApp({ // le const vm = est facultatif mais plus pratique</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> title: "Hello Word Vue"</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }).mount('#app')</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",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:"var(--ff-monospace)",serif; color:#08090A'> Ou</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:"var(--ff-monospace)",serif;color:#08090A'> const vm = {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> title: "Hello Word Vue"</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Vue.createApp(vm).mount('#app')</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> </span></p> <span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> </span></p> <h2 style='margin-left:0cm;text-indent:0cm'><a name= "variables-reactive" id="variables-reactive"></a>A-1. Variables Reactive</h2> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> La fonction data() sert à créer des variables réactives qui seront utilisées dans votre application Vue. Chaque fois qu'une variable réactive est modifiée, si elle est affichée ou utilisée dans votre page, Vue la mettra à jour immédiatement.</span></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Pour afficher une variable réactive ou une expression dans votre page vous devez utiliser les doubles crochets Vue remplacera le contenu de l'expression par sa valeur</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:"var(--ff-monospace)",serif;color:#08090A'> // variable</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> // expression</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title.toUpperCase() }}</span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><a name= "les-directives-vuejs" id= "les-directives-vuejs"></a><b><span style='font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <h2 style='margin-left:0cm;text-indent:0cm'><a name="node1" id= "node1"></a>A-2. Les directives Vue.js</h2> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Les directives Vue.js sont des attributs html qui peuvent être insérés dans votre page afin de modifier le rendu de votre application Vue.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Voici la liste des directives disponibles:</span></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-bind</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet d'assigner une expression à un attribut. Vue va remplacer l'expression par sa valeur</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> (ex: image_url : "</span><u><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:blue'><a href="http://www.exemple.com/car.jpg">http://www.exemple.com/car.jpg</a></span></u><span style='font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'>" dans app.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:"var(--ff-monospace)",serif;color:#08090A'> <img v-bind:src="image_url" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> // ou syntaxe raccourci</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <img :src="image_url" /></span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> v-once</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Avec la directive v-once Vue va interpoler l'expression seulement une fois. L'expression sera donc ignorée pour tous les autres rafraichissements.</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:"var(--ff-monospace)",serif;color:#08090A'> <div v-once></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> v-html</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Permet d'afficher une expression avec des tags 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:"var(--content-font-family)",serif;color:#08090A'> ex: title: "</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b><span style='font-size: 21.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> Hello World</span></b></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> "</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div v-html="title"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> </span></p> <p class="MsoNormal"><b><i><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:red'> Illustration TD1_base et TD2_base.</span></i></b></p> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-model</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet de lier la valeur d'un champ de saisie avec une variable. Si vous modifiez l'un ou l'autre Vue mettra a jour automatiquement l'autre. Du coup, la variable et le champ de saisie auront toujours la même valeur.</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:"var(--ff-monospace)",serif;color:#08090A'> <input v-model="name" type="text" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Nom : {{ name }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></b></p> <p class="MsoNormal"><b><i><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:red'> Illustration TD3_v-model.</span></i></b></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></b></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></b></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-if, v-else-if et v-else</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Rend un élément visible ou non visible selon la valeur vrai ou faux de l'expression. Lorsque non visible l'élément n'est pas rendu dans le 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:"var(--ff-monospace)",serif;color:#08090A'> <div v-if="montant > 100"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Livraison gratuite!</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div v-else-if="montant > 50"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Livraison 9.95$</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div v-else></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Livraison 19.95$</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-show</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Rend un élément visible ou non visible selon la valeur vrai ou faux de l'expression. Par contre, l'élément reste toujours présent dans le rendu. Lorsque non visible l'élément est rendu avec l'attribut CSS: display: none;</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:"var(--ff-monospace)",serif;color:#08090A'> <div v-show="isError"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ errorMessage }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-for</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Permet d'afficher une liste d'éléments</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:"var(--ff-monospace)",serif;color:#08090A'> <ul></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <li v-for="item in items" :key="item.id"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ item.name }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </li></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </ul></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter le mot clé "key" est nécessaire pour permettre à Vue d'identifier uniquement l'élément</span></p> <p class="MsoNormal"><b><i><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:red'> Illustration TD4_directive_v-for.</span></i></b></p> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <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" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Ref</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet à l'application Vue d'identifier un élément html et d'effectuer des actions sur cet élément.</span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Identification avec la directif ref</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:"var(--ff-monospace)",serif;color:#08090A'> <input type="text" ref="name"></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Manipulation à partir de votre code Vue en utilisant le mot clé spécial: $refs</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:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> handleClick() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> console.log(this.$refs.name)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.$refs.name.classList.add('active')</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.$refs.name.focus()</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> </div> <b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <p class="MsoNormal"><a name= "vbind-sur-lattribut-class-et-les-style" id= "vbind-sur-lattribut-class-et-les-style"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'> v-bind sur l'attribut "class" et les "style"</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Il est possible de faire un v-bind sur l'attribut class et style</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:"var(--ff-monospace)",serif;color:#08090A'> <div class="text-2xl" :class="isAdmin ? 'text-red-500' : 'text-gray-500'"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Hello World</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> À noter que l'attribut class est utilisé deux fois (une fois pour le css, une fois par Vue).</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Vue va regrouper ces deux attributs lors du rendu.</span></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Il est également possible d'utiliser un objet pour envoyer du contenu dans notre attribut "class"</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:"var(--ff-monospace)",serif;color:#08090A'> <div :class="{ 'text-red-500': isAdmin, 'text-gray-500': !isAdmin }"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Hello World</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter la syntaxe de l'object { attribut : expression } si l'expression retourne vrai alors l'attribut sera ajouter à la class</span></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Une syntaxe similaire s'applique à l'attribut style</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:"var(--ff-monospace)",serif;color:#08090A'> <div :style="{'margin-top': '10px', 'padding': '5px'}"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Hello World</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Enfin les attributs class et style peuvent être définis par une variable de type objet créé ailleurs dans votre application</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:"var(--ff-monospace)",serif;color:#08090A'> titleClass: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> 'text-red-400': this.isAdmin,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> 'text-gray-500': !this.isAdmin</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div :class="titleClass"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Hello World</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><a name= "l%C3%A9l%C3%A9ment"></a><b><span style= 'font-size: 15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'> L'élément</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Cet élément permet d'utiliser des directives de Vue sans créer un élément 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:"var(--ff-monospace)",serif;color:#08090A'> <<b>template</b> v-show="quantity === 0"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> La quantité doit être supérieure à zéro</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <<b>/template</b>></span></p> </div> <b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <p class="MsoNormal"><a name= "les-%C3%A9v%C3%A9nements"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <h2 style='margin-left:0cm;text-indent:0cm'><a name="node2" id= "node2"></a>A-3. Les Évènements</h2> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Vue permet de gérer les évènements javascript comme click, input, change, etc. Pour ce faire vous devez utiliser la directive v-on: suivi du nom de l'évènement.</span></p> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-on:click</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet d'exécuter du code sur le click d'un élément</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:"var(--ff-monospace)",serif;color:#08090A'> <button v-on:click="name = 'Mike'">Afficher message</button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> // ou syntaxe raccourci</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button @click="name = 'Mike'">Afficher message</button></span></p> </div> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-on:keydown</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet d'exécuter du code sur l'appui d'une touche (ex. enter)</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:"var(--ff-monospace)",serif;color:#08090A'> <button v-on:keydown.enter="name = 'Mike'">Afficher message</button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> // ou syntaxe raccourci</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button @keydown.enter="name = 'Mike'">Afficher message</button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Autres valeurs possibles pour v-on : keydown, keyup, keypress</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Autres valeurs possibles pour .enter : tab, esc, up, down, left, right, delete</span></p> <p class="MsoNormal"><b><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> v-on:submit</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet d'exécuter du code lors de la soumission d'un formulaire</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:"var(--ff-monospace)",serif;color:#08090A'> <form v-on:submit.prevent="name = 'Mike'"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <input v-model="name" type="text" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button type="submit">Sauvegarde</button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </form></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter, la présence de ".prevent" après la directive v-on:submit. Cette instruction va prévenir la soumission du formulaire au serveur.</span></p> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></p> <h2 style='margin-left:0cm;text-indent:0cm'><a name= "les-m%C3%A9thodes"></a>A-4. Les méthodes</h2> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Vue js permet de créer des méthodes afin d'y placer un bloc de code réutilisable dans votre application. Voici la syntaxe pour créer une méthode:</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:"var(--ff-monospace)",serif;color:#08090A'> Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> name: "Mike Taylor",</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> resetName() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.name = ''</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }).mount('#app')</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter le mot clé 'this' placé en avant de la variable name. Ce mot clé est obligatoire pour permettre de référencer une variable à l'intérieur de notre instance de Vue.</span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Pour appeler une méthode vous pouvez le faire simplement en utilisant son nom.</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:"var(--ff-monospace)",serif;color:#08090A'> <input v-model="name" type="text" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button @click="resetName" type="text">Effacer</button></span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Une méthode peut également contenir des paramètres</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:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> resetName(newName) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.name = newName</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <input v-model="name" type="text" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button @click="resetName('John')" type="text">Effacer</button></span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Une méthode peut également envoyer l'objet event</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:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> resetName(newName, e) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.name = newName</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> console.log(e.target.textContent)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <input v-model="name" type="text" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <button @click="resetName('John', $event)" type="text">Effacer</button></span></p> </div> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> À noter le paramètre spécial $event va envoyer l'objet event à notre méthode</span></p> <p class="MsoNormal"><b><i><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:red'> Illustration TD5_methode&evenement.</span></i></b></p> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> </span></p> <p class="MsoNormal"><a name= "les-m%C3%A9thodes-computed"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Les méthodes "computed"</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Contrairement aux autres méthodes qui vont se ré-exécutées à chaque rendu de votre application, les méthodes "computed" vont être ré-exécutées seulement si les variables qu'elles contiennent sont modifiées.</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:"var(--ff-monospace)",serif;color:#08090A'> computed: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> recalculerTotal(items, taxes) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return this.calculerTotal(items, taxes)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> </div> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Les méthodes "computed" peuvent ensuite être appelées dans notre page.</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:"var(--ff-monospace)",serif;color:#08090A'> <button @click="recalculerTotal">Re-Calculer</button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter qu'aucun paramètre ni parenthèse n'est utilisé</span></p> <p class="MsoNormal"><a name= "les-m%C3%A9thodes-watch"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Les méthodes "watch"</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Ces méthodes vont "regarder" une variable et dès qu'elle change exécutera le code de la méthode.</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:"var(--ff-monospace)",serif;color:#08090A'> watch: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> title(newTitle, oldTitle) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> console.log(`Le titre ${oldTitle} à changé pour ${newTitle}`)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> </div> <p class="MsoNormal"><a name= "les-m%C3%A9thodes-lifecycle-hook"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Les méthodes "Lifecycle Hook"</span></b></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Chaque instance de vue traverse une série d’étapes d’initialisation au moment de sa création - par exemple, elle doit mettre en place l’observation des données, compiler le template, monter l’instance sur le DOM et mettre à jour le DOM quand les données changent.</span></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> En cours de route, elle va aussi invoquer des <b><i>hooks</i> de cycle de vie</b>, qui nous donnent l’opportunité d’exécuter une logique personnalisée à chaque étape.</span></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Par exemple, le hook "created" est appelé une fois l’instance créée</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:"var(--ff-monospace)",serif;color:#08090A'> created() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> console.log('Mon instance est created')</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Il existe plusieurs autres méthodes hook. En voici quelques-unes:</span></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>beforeCreate</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>created</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>beforeMount</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>mounted</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>beforeUpdate</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>updated</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>beforeDestroy</span></li> <li class="MsoNormal" style='color:#08090A'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif'>destroyed</span></li> </ul> <h2 style='margin-left:0cm;text-indent:0cm'><a name= "les-components" id="les-components"></a>A-5. Les "Components" (composants)</h2> <p class="MsoNormal" style= 'margin-top:12.0pt;margin-right:0cm;margin-bottom: 6.0pt;margin-left:0cm'> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Vue.js est un framework qui permet et encourage l'organisation de votre application en plusieurs "components"et sous "components"</span></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Chaque élément distinct de votre page devra avoir son propre component. Par exemple la barre de navigation pourrait être contenu dans un component NavBar réutilisé sur plusieurs pages</span></p> <p class="MsoNormal" style= 'margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm'> <span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Voici la syntaxe pour créer des "components" et utiliser Vue seulement dans une petite partie de votre page.</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:"var(--ff-monospace)",serif;color:#08090A'> const app = Vue.createApp({</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> messsage: 'Un message'</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> deleteUser(userID) {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> console.log(`User ${userID} deleted`)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> })</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> app.component('nav-bar', {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> template: `</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> ...navigation bar code...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> `,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> props: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> title: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> type: String,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> required: true,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> default: 'Mon application'</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> sendDelete() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> const userId = 10</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.$emit('delete', userId)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> })</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> app.mount('#app')</span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Les components crées peuvent ensuite être utilisés comme des tags HTML dans votre page</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:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <nav-bar title="Mon application" v-on:delete="deleteUser($event)" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> L'élément "template" contient le HTML qui sera rendu à l'endroit où vous avez placé votre tag component dans votre page html</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> L'objet "props" définit quelle data est attendue lors du rendu du component</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:"var(--ff-monospace)",serif;color:#08090A'> props: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> title: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> type: String,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> required: true,</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> default: 'Mon application'</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> },</span></p> </div> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Props peut également être utilisé avec une syntaxe raccourci</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> props: ['title'],</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Vous pouvez par la suite assigner une valeur à ces props lors de l'utilisation du component</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:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <nav-bar title="Mon application" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Enfin, le mot-clé $emit permet d'émettre un événement. Cet évènement pourra ensuite être capté par votre application avec un v-on:nom-event</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:"var(--ff-monospace)",serif;color:#08090A'> methods: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> sendDelete() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> const userId = 10</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> this.$emit('delete', userId)</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <div></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <nav-bar title="Mon app" v-on:delete="deleteUser" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </div></span></p> </div> <p class="MsoNormal"><a name= "cr%C3%A9er-un-application-enti%C3%A8re-a"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <p class="MsoNormal"><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'> </span></b></p> <p class="MsoNormal"><b><i><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:red'> Illustration TD6_composant.</span></i></b></p> <b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <p class="MsoNormal"><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'> </span></b></p> <h1 style='margin-left:1.0cm;text-indent:-1.0cm'><a name="node3" id="node3"></a><span style= 'font-size:20.0pt; font-family:"Arial",sans-serif'>B. CREER UNE APPLICATION VUE JS AVEC L'OUTIL DE DEVELOPPEMENT VUE CLI</span></h1> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> L'outil pour créer un projet Vue.js est Vue CLI. Vous devrez l'installer</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> npm install -g @vue/cli <b><i>ou avec yarn (c'est ce que nous utiliserons)</i></b></span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><a name= "vue-create" id="vue-create"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Vue create</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet de créer un projet Vue.js avec plein d'éléments déjà préconfigurés pour vous.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> vue create my-app-name</span></p> <p class="MsoNormal"><a name="npm-run-serve" id= "npm-run-serve"></a><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'>npm run serve</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Une fois l'application créée vous pouvez vous positionner dans le dossier et lancer le serveur de développement.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> cd my-app-name</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> npm run serve</span></p> <p class="MsoNormal"><a name="vue-add" id= "vue-add"></a><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Vue add</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Il est possible d'ajouter des plugin/librairie à votre projet Vue en utilisant le raccourci vue add. Voici 3 exemples:</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> vue add vue-router</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> vue add vuex</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> vue add tailwind</span></p> <p class="MsoNormal"><a name= "point-de-d%C3%A9part"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Point de départ</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Vue CLI va créer plusieurs dossiers et fichiers. Le point de départ est public/index.html et "src/main.js"</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> import { createApp } from "vue";</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> import App from "./App.vue";</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> </span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> createApp(App).mount("#app");</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Le component qui sert de point d'entrée est donc App.vue</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Avec une application Vue, aucun code HTML ne sera écrit dans le fichier index.html. Votre code HTML sera écrit dans la section de chacun de vos components</span></p> <b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <p class="MsoNormal"><a name="vite" id="vite"></a><b><span style= 'font-size:15.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <p class="MsoNormal"><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'> Vite</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Il est également possible de créer un projet avec Vite. C'est un outil plus récent et plus efficace</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> npm init @vitejs/app my-app-name --template vue</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Cette commande va créer exactement un projet Vue.js avec les mêmes pré-configurations que le Vue-CLI</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Avec un projet Vite, la commande pour lancer le serveur est</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> npm install</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> npm run dev</span></p> <p class="MsoNormal"><a name="les-singlefile-component" id= "les-singlefile-component"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Les Single-File Component</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Chaque component Vue est défini dans son propre fichier .vue avec la syntaxe suivante</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <img alt="Vue logo" src="./assets/logo.png" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <HelloWorld msg="Hello Vue 3 + Vite" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ message }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> import HelloWorld from './components/HelloWorld.vue'</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> export default {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> components: {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> HelloWorld</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> },</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> data() {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> return {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> message: 'Hello World'</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }, </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </script></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <style scope ></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> #app {</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> font-family: Avenir, Helvetica, Arial, sans-serif;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> text-align: center;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> color: #2c3e50;</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> }</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </style></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter qu'avec l'utilisation des <i>single-file-component</i>, le code HTML du component est saisi dans la section template. Il n'est pas saisi dans la div #app de votre index.html</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Comme démontré dans le dernier exemple, Il est possible d'utiliser un autre component à l'intérieur de votre component actuel.</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <HelloWorld msg="Hello Vue 3 + Vite" /></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Pour cela il faut utiliser import:</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--ff-monospace)",serif; color:#08090A'> import HelloWorld from './components/HelloWorld.vue'</span></p> <p class="MsoNormal"><a name="emplacement-des-fichiers-components" id="emplacement-des-fichiers-components"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Emplacement des fichiers components</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Les Single-File-Component sont sauvegardés dans un dossier src/components ou src/pages selon si le component agit à titre de page (ex. About.vue) ou à titre de component ré-utilisable (ex. NavBar.vue)</span></p> <p class="MsoNormal"><a name="les-slots" id= "les-slots"></a><b><span style= 'font-size:21.0pt; font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Les Slots</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Les slots permettent d'ajouter du contenu à un component</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:"var(--ff-monospace)",serif;color:#08090A'> <custom-button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Je peux ajouter du contenu...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Titre: {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </custom-button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter que le rendu de 'title' se fera dans le component parent. Le même principe s'appliquera pour le css. Donc le contenu de la slot doit être défini/accessible dans le component parent</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À l'interne le custom-button ressemble à quelque chose comme ceci:</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> </div> <p class="MsoNormal" style='margin-top:12.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> La balise slot va être remplacée par le contenu de 'custom-button'</span></p> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> Il est possible de définir une valeur par défaut pour la slot</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot>Si rien n'est spécifier je vais m'afficher</slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter que la valeur par défaut est défini dans le component enfant, donc devra utiliser les variables ou le css défini dans le component enfant.</span></p> <b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'><br clear="all" style='page-break-before:always' /></span></b> <p class="MsoNormal"><a name="les-slots-multiples" id= "les-slots-multiples"></a><b><span style= 'font-size: 15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'> </span></b></p> <p class="MsoNormal"><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif; color:#08090A'> Les slots multiples</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Permet d'ajouter du contenu associé seulement à un slot en particulier</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:"var(--ff-monospace)",serif;color:#08090A'> <custom-button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Je peux ajouter du contenu...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <template #title></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </custom-button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> '#title' indentifie la template au slot title. La syntaxe v-slot:title peut également être utilisé.</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À l'interne le custom-button ressemble à quelque chose comme ceci :</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot name="title"></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> </div> <p class="MsoNormal" style='margin-top:6.0pt'><span style= 'font-size:12.0pt; font-family:"var(--content-font-family)",serif;color:#08090A'> À noter que le slot principal est toujours disponible</span></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> (les balises ici sont optionnelles) mais il est possible d'ajouter un second slot avec un nom</span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><a name= "slot-props" id="slot-props"></a><b><span style= 'font-size:15.0pt;font-family:"var(--ff-sans-serif)",serif;color:#08090A'>Slot Props</span></b></p> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Les slots peuvent avoir des props</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot name="title" satus="info"></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Les Props peuvent ensuite être utilisés</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:"var(--ff-monospace)",serif;color:#08090A'> <custom-button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Je peux ajouter du contenu...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <template #title="titleProps"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ titleProps.status }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </custom-button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> Il est possible de définir des Props pour les slot principal en utilisant '#defaut'</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:"var(--ff-monospace)",serif;color:#08090A'> <template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot type="ajout"></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <slot name="title" status="info"></slot></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <custom-button></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <template #default="defaultProps"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Je peux ajouter du contenu...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ defaultProps.type }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> <template #title="titleProps"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ title }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ titleProps.status }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </template></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </custom-button></span></p> </div> <p class="MsoNormal"><span style= 'font-size:12.0pt;font-family:"var(--content-font-family)",serif; color:#08090A'> À noter que si il n'y a pas de named slot. Il est possible d'utiliser les Props du default avec cette syntaxe</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:"var(--ff-monospace)",serif;color:#08090A'> <custom-button #default="defaultProps"></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> Je peux ajouter du contenu...</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> {{ defaultProps.type }}</span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span style= 'font-size:12.0pt; font-family:"var(--ff-monospace)",serif;color:#08090A'> </custom-button></span></p> </div> <p class="MsoNormal"><a name="conclusion" id= "conclusion"></a> </p> <p class="MsoNormal"> </p> </div>
Table des matières
Sujets
Recherche
A. UTILISATION VUE JS SANS OUTIL DE DEVELOPPEMENT
A-1. Variables Reactive
A-2. Les directives Vue.js
A-3. Les Évènements
A-4. Les méthodes
A-5. Les "Components" (composants)
B. CREER UNE APPLICATION VUE JS AVEC L'OUTIL DE DEVELOPPEMENT VUE CLI
A-1. Variables Reactive
A-2. Les directives Vue.js
A-3. Les Évènements
A-4. Les méthodes
A-5. Les "Components" (composants)
A. UTILISATION VUE JS SANS OUTIL DE DEVELOPPEMENT
B. CREER UNE APPLICATION VUE JS AVEC L'OUTIL DE DEVELOPPEMENT VUE CLI
Générée avec
chmProcessor
Générée avec
chmProcessor