02跑马灯-定时器的使用

划重点
  • v-bind: 绑定事件
  • function_name (){ } //ES6的函数写法规范
  • 定时间:setInterval / clearInterval
上硬菜
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯效果</title>
    <script src="./lib/vue-2.6.10.js"> </script>
</head>

<body>
    <div id="app">
        <!-- 事件绑定机制:v-on: 的缩写是: @ -->
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="停止浪(别浪)" @click="stop">
        <br><br>
        <input type="button" v-bind:value="msg">
        <br><br>
        <h4>{{ msg }}</h4>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '猥琐发育,别浪~~~',
                intervarId: null,
                intervarId_that: null
            },
            methods: {
                lang() {//(ES6的写法)这个是 lang: function() {} 的缩写      跑马灯开始
                    if (this.intervarId != null) return; //当 intervarId 不等于null的时候说明这个时候定时器在运行中...;; 反之 就启动定时器跑马灯功能
                    // setInterval 定时器:第一个参数是:需要执行的逻辑 ,第二个参数是 间隔多长时间执行一次(单位是:毫秒 ) 
                    //setInterval 返回的是一个 num :事件对应的Id; 通过这个Id  可以通过关闭定时器的函数:clearInterval (Id) 来关闭这个 定时器
                    // 

                    //表达式: => 表示的是 对应函数的父环境; 所以?两个逻辑 功能一样
                    var that = this;
                      this.intervarId  = setInterval(function () {
                        //注意这里的上下环境是:对应定时器的环境;所以这里不能直接用this(因为this 表示的是 vm 的上下文环境 )
                        console.log(that.msg);
                        var startmsg = that.msg.substring(0, 1);//截取字符串:取第一个 
                        var endmsg = that.msg.substring(1);//截取字符串:取第一个后面的所有 
                        that.msg = endmsg + startmsg;


                    }, 100);

                    // 因为使用了表达式: => 那么这个时候setInterval 函数对应的 上下文是其父环境;也就是 vm 的环境;那么这个时候就可以使用this ;这个时候 this 表示的就是 vm 的环境

                    // this.intervarId_this = setInterval(() => {
                    //     console.log(this.msg);
                    //     var startmsg = this.msg.substring(0, 1);//截取字符串:取第一个 
                    //     var endmsg = this.msg.substring(1);//截取字符串:取第一个后面的所有 
                    //     this.msg = endmsg + startmsg;

                    // }, 100);


                },
                stop: function () {//缩写是(ES6的写法):stop(){}              跑马灯停止
                    clearInterval(this.intervarId);
                    this.intervarId = null ;
                }
            }

        })



    </script>
</body>

</html>
点击 “浪起来” :跑马灯开始 ~~~

02跑马灯-定时器的使用_第1张图片

点击 停止浪(别浪) : 跑马灯停止 ~~~

02跑马灯-定时器的使用_第2张图片

你可能感兴趣的:(Vue)