前言
最近在学习vue，看的某站上某马的教程。也看官网的文档，我学习一直两者结合学习。很感谢某马的教程，讲的非常容易理解，真是家里贫穷，不然肯定去给某马点学费。不过，我一直对同学报班的同学宣传某马。由于以下代码与源代码差别不大，不知道该不该投自制，算了，还是投翻译吧！如果对贵公司有影响，联系我必删除。
代码实现
<!--
该网页用于制作一个跑马灯效果Demo
//分析：
//1.给｛浪起来｝按钮，绑定一个点击事件 v-on @
2. 在按钮的时间处理函数中，写相关的业务逻辑代码：
拿到msg字符串，然后调用字符串的substring方法来进行字符串的截取操作，
把第一个字符截取出来，放到最后一个位置即可；
3.为了实现点击一下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--1.导入Vue包-->
<script src="js/vue.js"></script>
</head>
<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(){
// var _this=this
// console.log(this.msg)
if(this.intervalId !=null)return;
this.intervalId = setInterval(() => {
//获取到头的第一个字符
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)
//每当清除了定时器之后，需要重新把intervalId置为null
this.intervalId=null;
}
}
})
</script>
</body>
</html>