继续来玩玩咱的「定时器」，发现没，刚刚的定时器，如果你不把网页关掉，它是停不下来的，那咋办？
咱可以提供三个按钮来控制它，分别是开始定时、暂停定时、停止定时。
在这里，咱重点搞明白两件事儿：
- 按钮怎么绑定点击事件？
- 要执行的方法应该写在哪儿？
绑定点击事件，其实很简单，使用 v-on:click就可以去绑定在 methods里实现的方法了，具体步骤是这样的：
- 创建一个 Vue 的实例；
- 提供一个 data 选项；
- 提供一个 timer 变量，代表定时器
- 返回一个 content，显示计数的数据
- 在页面提供三个按钮来控制定时器；
- 分别为开始定时、暂停定时、停止定时
- 按钮使用 v-on:click 来绑定点击事件，调用在 methods 中指定方法
- 在 methods 中提供对应方法；
- 挂载 Vue 实例到 id 为 root 的位置；
- 展示数据。
绑定点击事件案例：
具体看代码：
<!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>Hello Vue</title> <!-- 其实，就一句即实现引入 Vue.js --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 第六步，展示数据 --> <div id="root"></div> </body> <script> // 第一步，创建一个 Vue 的实例 Vue.createApp({ // 第二步，提供一个 data 选项 // 提供一个 timer 变量，代表定时器 // 返回一个 content，显示计数的数据 data() { var timer return { content: 0 } }, // 第四步，在 methods 中提供对应方法 methods: { // 开始定时 startTimer(){ timer = setInterval( () => { this.content++ }, 1000) }, // 暂停定时 pauseTimer(){ clearInterval(timer) }, // 停止定时 stopTimer(){ this.pauseTimer() this.content = 0 } }, // 第三步，在页面提供三个按钮来控制定时器 // 分别为开始定时、暂停定时、停止定时 // 按钮使用 v-on:click 来绑定点击事件，调用在 methods 中指定方法 template:` <div> 定时器：{{ content }} </div> <div><button v-on:click="startTimer">开始定时</button></div> <div><button v-on:click="pauseTimer">暂停定时</button></div> <div><button v-on:click="stopTimer">停止定时</button></div> ` }).mount('#root'); // 第五步，挂载 Vue 实例到 id 为 root 的位置 </script> </html>
运行效果：
