<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal">A partir du fichier html suivant :</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'> <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'> <input v-model="nom" type="text" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div></p> <p class="MsoNormal" style='border:none;padding:0cm'> Nom : <b><!-- A compléter ici --></b></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <button type="text">RAZ</button> <b><!-- A compléter dans <button> --></b></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'> <p class="MsoNormal" style='border:none;padding:0cm'>const vm = 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'> nom: "Dupont"</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'> // A compléter ici</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'> }).mount('#app')</p> <p class="MsoNormal" style='border:none;padding:0cm'>// mount spécifie que l'application Vue s'affichera dans la div avec id="app"</p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal">produisant l'affichage ci-dessous :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="183" height="82" id="Image 2" src= "td5_methode&evenement_enonce_fichiers/image001.png" alt= "image" name="Image 2" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">On voudrait, à l'aide de vue js, obtenir, à partir du clic sur le bouton RAZ, l'affichage suivant :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="174" height="80" id="Image 1" src= "td5_methode&evenement_enonce_fichiers/image002.png" alt= "image" name="Image 1" /></span></p> <p class="MsoNormal"> </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\td5\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