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> <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的基础知识。
学编程一定要多动手，常练习，勤思考！
每天进步一点点！
Vue学习之路第七篇：跑马灯项目实现的更多相关文章
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- vue学习指南：第七篇(详细) - Vue的 组件通信
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
- Vue学习之路第十七篇：全局过滤器的使用
1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...
随机推荐
- jmeter录制
1.添加线程组 2.添加HTTP代理服务 3.浏览器的代理设置 4.添加证书 5.排除模式 .*\.(jpg|css|png|git).*或者 .*\.jpg 6.录制只限制某一个ip段 7.最后一句 ...
- gradle多模块构建集成swagger
1.首先说一下软件的版本:springboot:1.5.2:springcloud:D-SR1:swaager2:2.6.0:gradle:4.5.工程模块是分开的单独的entity,api,mapp ...
- Django 中Admin站点的配置
Admin站点是django提供的一个后台管理页面,可以用来对用户与数据库表数据进行管理. Admin站点配置流程 1.在settings.py文件中INSTALL_APPS列表中添加django.c ...
- 关于高校表白APP的用户模板和用户场景
用户模板一: 用户名 小明 性别,年龄 男,20岁 用户状况 单身,在校大学生 生活爱好 喜欢打篮球,唱歌 典型场景 希望找到一个心仪的可以走到最后的姑娘 典型描述 交友 用户比例 ? 用户场景一 ...
- php 返回某个月的 每周几有几天
不得不承认,这真是一个奇葩的需求,无奈写个类凑活用用. 输入日期格式或者 时间戳,返回当月有多少个周一.周二.周三.....周日; 思路就是 找到这个月有多少天,在便利判断. 稍微考虑下闰年的情况 前 ...
- 在android平台打印C语言日志
在android平台打印C语言日志 1.操作平台:AS2.0 2.步骤如下: 在C代码中添加如下代码: #define LOG_TAG "我的C语言日志:" #define LOG ...
- （3）Spring Boot热部署【从零开始学Spring Boot】
在编写代码的时候,你会发现我们只是简单把打印信息改变了下,就需要重新部署,如果是这样的编码方式,那么我们估计一天下来之后就真的是打几个Hello World之后就下班了.那么如何解决热部署的问题呢?那 ...
- 最短路&查分约束
[HDU] 1548 A strange lift 根蒂根基最短路(或bfs)★ 2544 最短路 根蒂根基最短路★ 3790 最短路径题目 根蒂根基最短路★ 2066 一小我的观光 根蒂根基最短路( ...
- 干货：鲜为人用的MySQL高级特性与玩法！
上一篇文章<万字总结:学习MySQL优化原理,这一篇就够了!>文末给大家留有两个开放的问题: 有非常多的程序员在分享时都会抛出这样一个观点:尽可能不要使用存储过程,存储过程非常不容易维护, ...
- BA-传感器
01.室内温度传感器 壁装,西门子,QAA2061D 1.默认范围:温度0-50℃,湿度0-100% 2.供电方式:24vac 3.穿线方式:4芯屏蔽线 02.风管温度传感器 西门子,QAM2120. ...