Vue学习第一天，跑马灯效果

开启定时器

    
    
    
{{message}}

分析代码

1. 创建Vue结构
2. 创建两个button
3. 创建一个定时器将需要的方法体放在第一个参数位，在第二个参数位放上定时的时间
4. 需要的逻辑方法：截取字符串，获取第一个字符，获取后面的所有字符，然后将字符串重写拼接，并定义给原本的字符串

为了解决this指向的问题，可以使用

methods:{
            lang:function () {
                setInterval( () => {
                    var start=this.message.substring(0,1)
                    var end=this.message.substring(1)
                    this.message=end+start
                },400)
            },

关闭定时器

首先，关闭定时器的基础是使用clearInterval(传入定时器的ID)

分析，所以需要在开启的时候获取对应的id值，为了能在全局都能获得id值，所以在data中定义一个属性IntervalId:null

其次，在开启定时器的时候使用this.IntervalId=setInterval......，这样就可以获取到对应的定时器的id

然后创建一个绑定了的方法，调用clearInterval（this.IntervalId）

最终代码

    
    
    {{msg}}

1. 创建一个div做操作域，id为app，然后在其中创建两个按钮，一个文本，按钮使用v-on表达式调用方法，文本输出值
2. 创建正常的Vue模板，包括定义作用域，文本信息，以及两个方法
3. 创建开启定时器的方法，在方法体重使用setInterval()，传入两个参数，第一个参数是一个方法，第二个参数是这个定时器的调用间隔时间，需要注意的是，这个地方需要一个返回值做该定时器的id，所以需要在data的数据域部分定义一个全局变量，还有就是为了使方法的this能确定是同一个，需要使用“=>”，这样可以将其中的this确定为同一个
4. 关闭计时器也就是调用clearInterval()，传入一个定时器的id
5. 为了使能够循环使用这个定时器，也就是说对IntervalId的值的调用能反复，并且防止用户在一开始就调用wen()方法，这个时候就在定时器开启是加入判断，在定时器关闭时初始化IntervalId

if (this.IntervalId!=null) return;

this.IntervalId=null