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 ...
随机推荐
- MAVEN 构建包的引用
1.什么叫构建包的引用? 当你存在两个maven项目分别是项目A,项目B时,且项目B要引用项目A的方法,那么你就用把项目A打成*.jar架包,放到本地的Maven仓库提供给项目B去引用. A.用命令到 ...
- 搞定PHP面试 - 变量知识点整理
一.变量的定义 1. 变量的命名规则 变量名可以包含字母.数字.下划线,不能以数字开头. $Var_1 = 'foo'; // 合法 $var1 = 'foo'; // 合法 $_var1 = 'fo ...
- 【hiho一下 第八周】状态压缩·一
[题目链接]:http://hihocoder.com/problemset/problem/1044 [题意] [题解] 设f[i][j]表示; 前i-1个位置已经决策完; 然后i-m+1..i这一 ...
- ARP（地址解析协议）
目录 1. ARP 概述 2. ARP 协议工作原理 3. ARP 缓存 4. ARP 报文格式 5. 抓包分析 5.1. ARP 请求报文 5.2. ARP 应答报文 6. 免费 ARP 7. AR ...
- 04springMVC数据类型转换
数据类型转换简介 Spring Web MVC中的数据类型转换 内建的类型转换器 自定义类型转换器 1 数据类型转换简介 当从页面提交数据到后台Action的时候,通过请求发送的数据,通常都 ...
- POJ 2133
类似于DP一样做,但这题有个大坑,自己看DIS吧.... #include <iostream> #include <cstdio> #include <cstring& ...
- HDU 3756
很容易就想到把三维转化成了二维,求出点离Z轴的距离,把这个距离当成X坐标,Z轴当Y坐标,然后就变成了求一个直角三角形覆盖这些点 像上一题一样,确定斜率直线的时候,必定是有一点在线上的.于是,可以把直线 ...
- 漫说好管理vs.坏管理
天地会珠海分舵注:本文英文版来自Medium今日热点头条.漫画简单明了,全文差点儿没有多余的语言去装饰.两天内获得两千三百多个推荐,且读者的反馈也相当的热烈.中文版由天地会珠海分舵编译后分享给大家. ...
- 火狐浏览器中加入httprequest的方法
今天弄了非常久就才装好. 以下的样例是以 window为样例的,mac的也是这样, 下载好火狐之后点击右上角的菜单 想到httprequest是个插件,就点击附加组件 搜索出来之后找到httprequ ...
- Swift String转Character数组
通过String的characters方法,将String转Character数组 例如: let characters:Array<Character> = Array("01 ...