在Vue学习笔记（一）中我们已经学过了v-on这个指令，可以用来实现事件的绑定，本文我们利用 v-on 来实现一个简单的跑马灯效果，就是如下这种效果：
第一步：导入Vue包
<script src="/ajax/libs/vue/2.6.12/vue.min.js"></script>
第二步：创建一个要控制的区域
<div id="app"><button>开始</button><button>停止</button><h1>{{ msg }}</h1></div><script>var vm = new Vue({el: '#app',data: {msg: '加油 ~ 加油 ~ 你最棒！！！',},</script>
第三步：绑定事件
使用 v-on 或者其缩写"@"，给"开始"和“停止”按钮分别绑定一个点击事件。
<button @click="begin">开始</button><button @click="stop">停止</button><script>var vm = new Vue({el: '#app',data: {msg: '加油 ~ 加油 ~ 你最棒！！！',},methods: {begin() {},stop() {}}})</script>
第四步：begin() 事件处理
拿到 msg 字符串，然后调用字符串的substring()方法来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。为了实现点击按钮自动截取的功能，需要设置一个定时器。
begin() {this.intervalId = setInterval(() => {var start = this.msg.substring(0, 1)var end = this.msg.substring(1)this.msg = end + start}, 200)},
第五步：stop() 事件处理
想要停止跑马灯效果，只需要清除定时器即可。
stop() {clearInterval(this.intervalId)}
第六步：在data上定义定时器Id
var vm = new Vue({el: '#app',data: {msg: '加油 ~ 加油 ~ 你最棒！！！',intervalId: ''}})
注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去。【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="/ajax/libs/vue/2.6.12/vue.min.js"></script></head><body><div id="app"><button @click="begin">开始</button><button @click="stop">停止</button><h1>{{ msg }}</h1></div><script>var vm = new Vue({el: '#app',data: {msg: '加油 ~ 加油 ~ 你最棒！！！',intervalId: ''},methods: {begin() {this.intervalId = setInterval(() => {var start = this.msg.substring(0, 1)var end = this.msg.substring(1)this.msg = end + start}, 200)},stop() {clearInterval(this.intervalId)}}})</script></body></html>
