Vue学习之路第七篇:跑马灯项目实现

前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目。

学前准备:

需要掌握定时器的两个函数:setInterval和clearInterval以及作用域的概念

上代码,大家可以复制下来直接运行看看效果(vue.min.js 第一篇有下载链接):

<!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 type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>  <!-- 页面部分 -->
    <div id="app">
        <button @click="go()">开始</button>&emsp;<button @click="stop()">停止</button>
        <p>{{ msg }}</p>
    </div>
  <!-- JS部分 -->
    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : ‘好好努力,我的奥迪s5~‘,//跑马灯文字
                interObj : null  //定时器对象
            },
            methods : {

                go(){
                    if(this.interObj == null){
                        _this = this
                        this.interObj = setInterval(function(){
                          let start = _this.msg.substring(0,1);
                          let end = _this.msg.substring(1);
                          _this.msg = end + start;
                      },1000);
                    }

                },
                stop(){
                    clearInterval(this.interObj);
                    this.interObj = null;
                }
            }
        });
    </script>
</body>
</html>

代码分析:

页面上定义两个按钮,分别用来触发跑马灯效果和停止跑马灯效果。js部分分别定义了两个对象以及对应的方法。

1、go方法主要是使用定时器,每次把msg文本分成两个部分start和end,start为msg下标为0的字符串,end为msg下标为1至结尾的字符串,然后把end和start拼接为一个新的字符串赋值给msg,从而实现类似于跑马灯的效果。

2、end方法用来清除定时器,终止跑马灯效果。

3、methods方法里想要使用datat里的数据,需要使用关键字:this,但是这里要注意this作用域的范围。

4、大家可以看到每次改变msg文本内容的时候都会立刻反应在页面上,从侧面可以看出Vue响应式的特点。

内容还是很简单的,主要是用来练习基础的Vue知识。

学编程一定要勤动手,多练习,多思考!

每天进步一点点!

原文地址:https://www.cnblogs.com/shibin90/p/10320216.html

时间: 2024-09-30 22:19:30

Vue学习之路第七篇:跑马灯项目实现的相关文章

Vue学习之路第八篇:事件修饰符

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

Vue学习之路第十篇:简单计算器的实现

前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的eval()函数,其主要是用来计算某个字符串,并执行其中的 JavaScript 代码. 直接上代码(vue.min.js 第一篇有下载链接): <!DOCTYPE html> <html lang="en"> <head> <meta charse

Vue学习之路第十七篇:过滤器的使用

1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号("|")指示.使用方式为:{{ msg | formatMsg}},其中msg为要被过滤的文本,formatMsg为过滤器名称. ②:过滤器的定义方式: Vue.filter('formatMsg',function(ms

vue学习之路 - 4.基本操作(下)

vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 v-if v-else v-else-if v-for v-on v-bind v-model 以上指令前面都已说明其作用,并且使用过,这里将不再赘述. 下面我们看看 vue 的一些其他常用指令的用法: 在学习 v-text 和 v-cloak 之前我们先看看{{ }}的使用所存在的问题. {{

学习java随笔第七篇:java的类与对象

类 同一个包(同一个目录),类的创建与调用 class Man{ String name; void GetMyName() { System.out.println(name); } } public class Person { public static void main(String arges[]) { Man m=new Man(); m.name="小黄"; m.GetMyName(); } } 运行结果 不同的包(不同目录目录),类的创建与调用 package Peo

后端开发者的Vue学习之路(二)

目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim 样式绑定 class绑定 对象语法: 数组语法: style绑定 对象语法: 数组语法: 补充: 事件 绑定事件 事件修饰符 按键修饰符 事件绑定的简写 补充: Vue指令 数组操作 官网的话 补充: Vue的元素复用问题 数据残留问题 问题的解决: 首发日期:2019-01-20 上篇内容回顾:

Maven的学习资料收集--(七) 构建Spring项目

在这里,使用Maven构建一个Spring项目 构建单独项目的话,其实都差不多 1. 新建一个Web项目 参考之前的博客 2.修改 pom.xml,添加Spring依赖 [html] view plaincopy <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=&

Python学习之路【第一篇】-Python简介和基础入门

1.Python简介 1.1 Python是什么 相信混迹IT界的很多朋友都知道,Python是近年来最火的一个热点,没有之一.从性质上来讲它和我们熟知的C.java.php等没有什么本质的区别,也是一种开发语言,而且已经进阶到主流的二十多种开发语言的top 5(数据源自最新的TIOBE排行榜). 来头不小啊!二十多种主流的开发语言,我该从哪一个开始呢?人生苦短,let‘s python! 1.2 Python的由来和发展趋势 Python的前世源自鼻祖“龟叔”.1989年,吉多·范罗苏姆(Gu

linux学习之路二 ------登陆篇

上一篇中讲了如何搭建虚拟机学习平台,在这篇中将介绍如何登陆Linux系统和修改超级用户密码 1.打开虚拟机后,进入界面,需要让我们输入账号密码,在前面安装的时候我们设置过.如图 2.输入账号密码,输入密码的时候是不显示的,所以不要认为没有输入.如图 3.验证成功之后,出现[[email protected] ~]$ ,则说明登陆成功,Linux系统有超级用户和普通用户之分,超级用户也就是root用户了,如我们的就是普通用户, 普通用户[[email protected] ~]$中$就是代表了普通