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

开启定时器

<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="wen">
    <h4>{{message}}</h4>
</div>
<script>
    var apps=new Vue({
        el:"#app",
        data:{
            message:"猥琐发育，别浪~~"
        },
        methods:{
            lang:function () {
                var _this=this
                setInterval(function () {
                    // console.log(_this.message)
                    var start=_this.message.substring(0,1)
                    var end=_this.message.substring(1)
                    _this.message=end+start
                },400)

            },
            wen:function () {

            }
        }
    })
</script>

分析代码

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）

最终代码

<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="稳住" @click="wen">
    <span>{{msg}}</span>
</div>
<script>
    var apps=new Vue({
        el:"#app",
        data:{
            msg:"浪起来~~~",
            IntervalId:null,
        },
        methods:{
            lang(){
                if (this.IntervalId!=null) return;
                this.IntervalId=setInterval(() =>{
                    var start=this.msg.substring(0,1)
                    var end=this.msg.substring(1)
                    this.msg=end+start
                },400)
            },
            wen(){
                clearInterval(this.IntervalId)
                this.IntervalId=null
            }
        }
    })
</script>

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