Vue学习笔记（一）：跑马灯的实现

最新推荐文章于 2024-09-11 09:50:46 发布

JASON丶LI

最新推荐文章于 2024-09-11 09:50:46 发布

阅读量3.6k

点赞数 2

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_61908666/article/details/127814799

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先根据vue的基础框架搭建出需要呈现的文件（将需要进行跑马灯操作的程序进行文字呈现）

程序分析：

1. 给【触发】按钮，绑定一个点击事件 v-on

2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后调用字符串的 substring 来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；

3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；

tips：

1. 如何定义一个基本的Vue代码结构

2. 插值表达式和 v-text

3. v-cloak

4. v-html

5. v-bind Vue提供的属性绑定机制缩写是 :

6. v-on Vue提供的事件绑定机制缩写是 @

1、创建html例程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、先导入vue包 <script src="./lib/vue-2.4.0.js"></script>

<script src="./lib/vue-2.4.0.js"></script>    <!--导入Vue包-->

3、创建一个Vue例程

1、substring()函数

start:substring(0,1) --> 第零个字符到第一个字符

stop:substring(1) --> 第一个字符到结尾

跑马灯效果触发：将第一个字符赋值到最后一个字符

    var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
        },
        methods:{// 方法属性
            begin() {
                console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start

            }
        }
    })

2、 setInterval()函数

调用定时器函数setInterval(() => {事件},时间)

重置定时器clearInterval(触发状态)

设置跑马灯定时器

1：状态定义参数 -- intervalId: null

2：状态参数监测，避免二次触发 -- begin(){ if (this.intervalId != null) return; }

3：状态参数重置，使跑马灯可重新触发 -- stop(){ this.intervalId = null; }

var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
            msg2:'点我开始',
            msg3:'点我停止',
            // 定义触发状态
            intervalId: null 
        },
        methods:{// 方法属性
            begin() {

                // 跑马灯运行状态监测，避免重复出发跑马灯效果
                if (this.intervalId != null) return;

                //调用定时器函数setInterval(() => {事件},时间)
                this.intervalId = setInterval(() =>{
                                    // console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start
                }, 400)

            },
            stop() {
                // 重置定时器clearInterval(触发状态)
                clearInterval(this.intervalId)
                // 跑马灯状态重置
                this.intervalId = null;
            }
        }
    })

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>    <!--导入Vue包-->
</head>
<body>

    <!-- 控制区 -->
    <div id="app">

        <!-- 定于输出框 -->
        <h4>{{msg}}</h4>
        <!-- 定义开始按键 input type='类型' value='名称' :title="悬停显示内容" @click="点击后发生的事件" -->
        <input type="button" value="开始" :title="msg2" @click="begin">
        <!-- 定义结束案件 -->
        <input type="button" value="结束" :title="msg3" @click="stop">

    </div>


    <!-- 定义vue内app例程 -->
<script>
    var vm = new Vue({
        el:'#app',// VM实例名称
        data:{// 数据属性
            msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
            msg2:'点我开始',
            msg3:'点我停止',
            // 定义触发状态
            intervalId: null 
        },
        methods:{// 方法属性
            begin() {

                // 跑马灯运行状态监测，避免重复出发跑马灯效果
                if (this.intervalId != null) return;

                //调用定时器函数setInterval(() => {事件},时间)
                this.intervalId = setInterval(() =>{
                                    // console.log(this.msg)
                // 获取到头的第一个字符/
                var start = this.msg.substring(0,1)
                // 获取到后面的所有字符串
                var end = this.msg.substring(1)
                // 对this.msg重新赋值
                this.msg = end + start
                }, 400)

            },
            stop() {
                // 重置定时器clearInterval(触发状态)
                clearInterval(this.intervalId)
                // 跑马灯状态重置
                this.intervalId = null;
            }
        }
    })
  </script>
</body>
</html>