Vue学习之路第七篇：跑马灯项目实现
程序员文章站
2022-03-25 13:56:51
前面六篇讲解了Vue的一些基础知识，正所谓：学以致用，今天我们将用前六篇的基础知识，来实现类似跑马灯的项目。 学前准备： 需要掌握定时器的两个函数：setInterval和clearInterval以及作用域的概念 上代码，大家可以复制下来直接运行看看效果（vue.min.js 第一篇有下载链接）： ......
前面六篇讲解了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的基础知识。
学编程一定要多动手，常练习，勤思考！
每天进步一点点！