传智黑马39期WEB前端教程-Vue基础-Vue指令-跑马灯效果制作

跑马灯效果制作

1.进入目录 demo，修改文件 2.html，简化 v-on:click 为 @:click

2.进入目录 demo，添加文件 3.html

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 2.创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" />
        <input type="button" value="低调">

        <h4>{{ msg }}</h4>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg:'猥琐发育，别浪~~!',
            }
        })
    </script>
</body>
</html>

3.浏览器查看效果

4.进入目录 demo，修改文件 3.html

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 2.创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang"/>
        <input type="button" value="低调">

        <h4>{{ msg }}</h4>
    </div>

    <script>
        //注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法
        //必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象
        var vm = new Vue({
            el:'#app',
            data: {
                msg:'猥琐发育，别浪~~!',
            },
            methods: {
                lang() {
                    console.log(this.msg)
                    //获取到头的第一个字母
                    var start = this.msg.substring(0, 1)
                    //获取到后面的所有字符
                    var end = this.msg.substring(1)
                    //重新拼接得到新的字符串，并赋值给this.msg
                    this.msg = end + start
                }

                //注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化
                //就会自动把最新的数据从data上同步到页面上去，[好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面]
            }
        })

        //分析：
        //1.给 [浪起来] 按钮，绑定一个点击时间 v-on
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到 msg 字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后的一个位置即可
        //3.为了实现点击一下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

5.浏览器测试，点击按钮浪起来，每点一下字符串滚动一个字

6.进入目录 demo，修改文件 3.html，添加一个计时器，让文字自动滚动

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 2.创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang"/>
        <input type="button" value="低调">

        <h4>{{ msg }}</h4>
    </div>

    <script>
        //注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法
        //必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象
        var vm = new Vue({
            el:'#app',
            data: {
                msg:'猥琐发育，别浪~~!',
            },
            methods: {
                lang() {
                    //console.log(this.msg)
                    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页面]
            }
        })

        //分析：
        //1.给 [浪起来] 按钮，绑定一个点击时间 v-on
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到 msg 字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后的一个位置即可
        //3.为了实现点击一下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

7.浏览器测试

8.进入目录 demo，修改文件 3.html，点击按钮低调可以停止滚动

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.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() {
                    //console.log(this.msg)
                    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);
                }

                //注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化
                //就会自动把最新的数据从data上同步到页面上去，[好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面]
            }
        })

        //分析：
        //1.给 [浪起来] 按钮，绑定一个点击时间 v-on
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到 msg 字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后的一个位置即可
        //3.为了实现点击一下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

9.浏览器测试

10.进入目录 demo，修改文件 3.html，定时器中判断一下如果intervalId不为null不用执行下面的代码

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.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() {
                    //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)
                   
                },
                stop() {
                    clearInterval(this.intervalId);
                }

                //注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化
                //就会自动把最新的数据从data上同步到页面上去，[好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面]
            }
        })

        //分析：
        //1.给 [浪起来] 按钮，绑定一个点击时间 v-on
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到 msg 字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后的一个位置即可
        //3.为了实现点击一下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

11.浏览器测试，第一次可以，停止后无法开启文字滚动，原因是 this.intervalId 一直不等于 null

12.进入目录 demo，修改文件 3.html，在清除定时器后设置 intervalId 等于 null

<!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>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="lib/vue-2.4.0.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() {
                    //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)
                   
                },
                stop() {
                    clearInterval(this.intervalId);
                    //每当清除了定时器之后，需要重新把 intervalId 设置为 null
                    this.intervalId = null;
                }

                //注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化
                //就会自动把最新的数据从data上同步到页面上去，[好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面]
            }
        })

        //分析：
        //1.给 [浪起来] 按钮，绑定一个点击时间 v-on
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到 msg 字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后的一个位置即可
        //3.为了实现点击一下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

13.浏览器测试　　

posted on 2019-11-01 14:59 herisson_pan 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

传智黑马39期WEB前端教程-Vue基础-Vue指令-跑马灯效果制作

导航

公告