<body>
<!-- 2. 创建一个要控制的区域 -->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<!-- 插值表达式 -->
<h4>{{ msg }}</h4>
</div>
<script>
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法
// 必须通过 this.数据属性名 或 this.方法名 来进行访问
// 这里的this，就表示 我们 new 出来的 VM 实例对象
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪~~！',
intervalId: null // 在data上定义 定时器Id
},
methods: {
lang() {
if (this.intervalId != null) return;
// 判断定时器有没有在运行，在运行 则直接返回。避免重复点击导致多个定时器同时生效。
// this.intervalId != null 表示定时器里的内容不是空值，所以是在运行。
this.intervalId = setInterval(() => { // 注意箭头函数用法和特点，ES6再复习一下。
var start = this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start
}, 400)
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，
// 只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；
// 【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},
stop() { // 停止定时器
clearInterval(this.intervalId)
this.intervalId = null;
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
// 否则下一次点击开启定时器时，定时器的值不是null，就无法运行新一轮定时器。
// 疑问： 清除了定时器之后， 定时器的值是？？？
}
}
})
</script>
</body>
