知识点：
1，在vm实例中 要想要获取data上的数据 或者想要调用methods中的方法，必须通过this.数据名 或者 this.方法名进行访问 这里的this就表示我们new出来的vm实例对象
2，vm实例会监听自己身上data中所有数据的改变 只要数据发生改变 就会自动把最新的数据从data上同步到页面中去
好处：程序员只关系数据 不需要考虑如何重新渲染dom页面
3，箭头函数解决this指向问题 让外部this和函数体内this指向保持一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Title</title> </head> <body> <div id="app"> <input type="button" value="开始" @click="lang"> <input type="button" value="停止" @click="stop"> <h4>{{msg}}</h4> </div> <script> var vm = new Vue({ el: '#app', data: { msg: '跑马灯跑起来', intervalId: null }, methods: { lang: function(){ // 注意：在vm实例中 如果想要获取data上的数据 或者想要调用methods中的方法 // 必须通过this.数据名 或者 this.方法名进行访问 这里的this就表示我们new出来的vm实例对象 console.log(this.msg) if (this.intervalId != null) return; // var _this = this // setInterval(function(){ // // 第一步 // var start = this.msg.substring(0, 1) // var end = this.msg.substring(1) // // vm实例会监听自己身上data中所有数据的改变 // // 只要数据发生改变 就会自动把最新的数据从data上同步到页面中去 // //好处：程序员只关系数据 不需要考虑如何重新渲染dom页面 // this.msg = end + start // }, 400) //箭头函数解决this指向问题 让外部this和函数体内this指向保持一致 this.intervalId = setInterval( () => { // 第一步 var start = this.msg.substring(0, 1) var end = this.msg.substring(1) // vm实例会监听自己身上data中所有数据的改变 // 只要数据发生改变 就会自动把最新的数据从data上同步到页面中去 //好处：程序员只关系数据 不需要考虑如何重新渲染dom页面 this.msg = end + start }, 400) }, // 停止定时器 stop(){ clearInterval(this.intervalId) // 每当清除定时器之后 需要重新把interid置为null this.intervalId = null } } }) // 分析 // 1，给【点击】按钮 绑定一个点击事件 v-on // 2,在按钮的事件处理函数中，写业务代码 拿到msg字符串 然后调用字符串的substring进行字符串截取 // 把 第一个字符截取出来 放到最后一个位置即可 // 3，为了实现点击按钮 自动截取功能需要把2中的代码放到一个定时器中 </script> </body> </html>