1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div>
<template id="code"> <div> <h2>{{message}}</h2> <h2>{{counter}}</h2> <button @click='increment'>+1</button> <button @click='decrement'>-1</button> </div> </template>
<script src="../js/vue.js"></script> <script> Vue.createApp({ template: '#code', data: function() { return { counter: 100 , message: "hello Vue.js!" } }, methods: { increment() { this.counter++; console.log("increment") console.log(this.counter) }, decrement: function() { this.counter--; console.log("decrement") console.log(this.counter) } } }).mount("#app") </script> </body> </html>
|