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 ...
随机推荐
- 【BZOJ1367】【Baltic2004】sequence - 可合并堆
题意: 题解: 其实这是道水题啦……只不过我没做过而已 先考虑构造不严格递增序列,考虑原序列中的一段下降区间,显然区间中的$z$全取中位数最优: 那么可以把原序列拆成很多个下降序列,从头到尾加入原序列 ...
- POJ 2376 Cleaning Shifts (线段树优化DP)
题目大意:给你很多条线段,开头结尾是$[l,r]$,让你覆盖整个区间$[1,T]$,求最少的线段数 题目传送门 线段树优化$DP$裸题.. 先去掉所有能被其他线段包含的线段,这种线段一定不在最优解里 ...
- linux ubuntu安装好后，开通远程登录
1.设置root密码 ubuntu安装好后,用初始的第一个用户登录,然后修改root密码: sudo passwd root 2.检查sshd服务是否启动 (1)查看sshd状态 -----若没有ss ...
- Windows下通过FTP自动上传和下载动态文件名
某个项目中每天会生成一个以文件名+日期.rar文件,如bcpdata2012-08-31.rar文件,动态的部分为日期部分,在windows环境变量中用 %date:~0,10% 表示,这个文件生成后 ...
- BA-Siemens-时间表
问题1:弹出了subsystem:atom Identifier 0000000023的错误对话框,此问题目前不知道如何处理,先攒着吧.
- Codeforces Round #136 (Div. 1) B. Little Elephant and Array
B. Little Elephant and Array time limit per test 4 seconds memory limit per test 256 megabytes input ...
- nyoj-647-奋斗小蜗牛在请客（进制转换）
奋斗小蜗牛在请客 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 一路艰辛一路收获.成功爬过金字塔的小蜗牛别提多高兴了.这不为了向以前帮助他的哥们们表达谢意,蜗牛宴请 ...
- Codeforces Round #260 (Div. 1) 455 A. Boredom （DP）
题目链接:http://codeforces.com/problemset/problem/455/A A. Boredom time limit per test 1 second memory l ...
- Debian以下的ntp服务(ntpdate)的安装
/********************************************************************* * Author : Samson * Date ...
- Mina airQQ聊天 client篇（三）
开发工具 (FlashBuilder4.7) 程序类型(Adobe Air) Flex Air做的桌面程序,效果还挺好看的.最主要是Socket这一块,它也是异步的,而且在Flex中的事件机制比較强大 ...