<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"> </p> <p class="MsoNormal">En prenant connaissance du fichier html suivant :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt; margin-left:0cm;margin-right:-35.5pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <title>Ma page Vue.js</title></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div id="app"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nav-bar titre="Mon application" @efface="effaceUtilisateur($event)" @ajout="ajoutUtilisateur($event)" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src="https://unpkg.com/vue@next"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src="./app.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <p class="MsoNormal">Et du fichier app.js :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt; margin-left:0cm;margin-right:-28.4pt'> <p class="MsoNormal" style='border:none;padding:0cm'>const app = Vue.createApp({</p> <p class="MsoNormal" style='border:none;padding:0cm'> data() {</p> <p class="MsoNormal" style='border:none;padding:0cm'> return {</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> methods: {</p> <p class="MsoNormal" style='border:none;padding:0cm'> effaceUtilisateur(userID) {</p> <p class="MsoNormal" style='border:none;padding:0cm'> console.log(`Utilisateur ${userID} efface`)</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> ajoutUtilisateur(userID) {</p> <p class="MsoNormal" style='border:none;padding:0cm'> console.log(`Utilisateur ${userID} ajoute`)</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'>})</p> <p class="MsoNormal" style='border:none;padding:0cm'> app.component('nav-bar', {</p> <p class="MsoNormal" style='border:none;padding:0cm'> template: `</p> <p class="MsoNormal" style='border:none;padding:0cm'> <div></p> <p class="MsoNormal" style='border:none;padding:0cm'> {{ titre }}</p> <p class="MsoNormal" style='border:none;padding:0cm'> ...navigation bar code...</p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/> <input type='text' ref='saisie' @keyup.delete='envoiEfface(10);' @keyup.enter='envoiAjout(11);' /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> `,</p> <p class="MsoNormal" style='border:none;padding:0cm'> props: {</p> <p class="MsoNormal" style='border:none;padding:0cm'> titre: {</p> <p class="MsoNormal" style='border:none;padding:0cm'> type: String,</p> <p class="MsoNormal" style='border:none;padding:0cm'> required: true,</p> <p class="MsoNormal" style='border:none;padding:0cm'> default: 'Mon application'</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> methods: {</p> <p class="MsoNormal" style='border:none;padding:0cm'> envoiEfface(userId) {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.$emit('efface', userId)</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> envoiAjout(userId) {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.$emit('ajout', userId)</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'>})</p> <p class="MsoNormal" style='border:none;padding:0cm'> app.mount('#app');</p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal">Essayer de comprendre le fonctionnement de cette application.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal">Le fichier html et le fichier js de départ sont fournis en ressources dans \\prof\vue js\td6\ressources.</p> <p class="MsoNormal"> </p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor