1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>计数器案例练习</title>
8 </head>
9
10 <body>
11 <div id="demo">
12 <h1>当前计数：{{counter}}</h1>
13 <!-- 监听事件 click-->
14 <!-- <button v-on:click="counter++">+</button>
15 <button v-on:click="counter--">-</button> -->
16
17 <!-- 这样写可以给一个提示 -->
18 <button v-on:click="add">+</button>
19 <!-- 缩写 -->
20 <button @click="sub">-</button>
21 </div>
22 <script src="../js/vue.js"></script>
23 <script>
24 // 简写
25 const demo = {
26 counter: 0
27 }
28 //常量
29 const app = new Vue({
30 el: "#demo",
31 //第一种写法
32 // data: {
33 // counter: 0
34 // }
35 //第二种写法
36 data: demo,
37 // methods方法 可以定义函数
38 methods: {
39 add: function() {
40 console.log("加法执行了");
41 this.counter++
42 },
43 // sub减
44 sub: function() {
45 console.log("减法执行了")
46 this.counter--
47 }
48 },
49 })
50 </script>
51 </body>
52
53 </html>
