Vue学习(四): 跑马灯效果案例

开启跑马灯效果分析思路

给开启按钮绑定一个点击事件 v-on @
在按钮的处理事件函数，写相关的业务逻辑代码:拿到msg字符串，然后调用字符串的substring来进行字符串的截取，把第一个字符串截取出到最后一个
为了实现点击按钮，自动截取功能，需要把2步骤中的代码，放到一个计时器里面。

代码示例:

<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>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <input type="button" value="开启" @click="on">
        <input type="button" value="关闭">
    </div>
    <script>
    var vm =new Vue({
        //注意在vm实例中，如果获取data数据/methods中的方法，都需要通过this.数据属性名和方法名，这里的this.表示new vue的实例
        el: '#app',
        data:{
            msg: '跑马灯效果开启效果！！！'
        },
        methods:{
            on(){
                setInterval(()=>{
                    //获取第一个字符
                    var start = this.msg.substring(0,1)
                    //获取后面的所有字符
                    var end = this.msg.substring(1)
                    //重新拼接(马灯效果开启效果！！！跑),并赋值给 this.msg
                    this.msg = end + start
                }, 400)
               
            }
        }
    
    })
    //步骤分析
    //1.给开启按钮绑定一个点击事件 v-on @
    //2.在按钮的处理事件函数，写相关的业务逻辑代码:拿到msg字符串，然后调用字符串的substring来进行字符串的截取，把第一个字符串截取出到最后一个
    //3.为了实现点击按钮，自动截取功能，需要把2步骤中的代码，放到一个计时器里面。
    </script>
</body>
</html>

注意:

在vm实例中，如果获取data数据/methods中的方法，都需要通过this.数据属性名和方法名，这里的this.表示new vue的实例

console.log(this.msg)

VM实例会监听自己身上data中所有数据的变化，如果数据一发生变化，就会自动把最新的数据，从data上同步到页面中去(好处:减少DOM操作)

完整代码示例

<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>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <input type="button" value="开启" @click="on">
        <input type="button" value="关闭" @click="stop">
    </div>
    <script>
    var vm =new Vue({
        //注意在vm实例中，如果获取data数据/methods中的方法，都需要通过this.数据属性名和方法名，这里的this.表示new vue的实例
        el: '#app',
        data:{
            msg: '跑马灯效果开启效果！！！',
            intervalId: null //在data上定义定时器id
        },
        methods:{
            on(){
                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)
               
            },
            stop(){//停止定时器
                clearInterval(this.intervalId)
                //每当清除定时器之后，需要把intervalId定义为null
                this.intervalId = null
            }
        }
    
    })
    //步骤分析
    //1.给开启按钮绑定一个点击事件 v-on @
    //2.在按钮的处理事件函数，写相关的业务逻辑代码:拿到msg字符串，然后调用字符串的substring来进行字符串的截取，把第一个字符串截取出到最后一个
    //3.为了实现点击按钮，自动截取功能，需要把2步骤中的代码，放到一个计时器里面。
    </script>
</body>
</html>