前面六篇讲解了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的基础知识。

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

每天进步一点点!

05-07 12:01