使用Vue完成跑马灯效果
首先我们需要了解以下知识点:
- 1.v-on:指令或@
- 2.v-html指令
- 3.定时器(正确启动和停止)
- 4.字符串截取
- 5.ECMAScript6新特性
- 6.this对象指代
【ECMAScript6的新特性】
1.给JavaScript对象方法定义值时
标准:
sayHello:function(){}
ES6:
此时,方法名sayHello会作为对象的属性方法值
sayHello(){
}
2.箭头函数的使用
标准:
setInterval(function(){
//此时this对象时Window对象
},500);
ES6:可以把外部环境传入箭头函数所指向的函数内部
setInterval(() => {
//此时this对依然是外部的this
},500);
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<button @click="start()">开启</button>
<button @click="stop()">停止</button>
<h3 v-html="info"></h3>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
info: "我要这天,再遮不住我眼,要这地,再埋不了我心,要这众生,都明白我意,要那诸佛,都烟消云散!",
IntervalID:null
},
methods:{
start:function () {
if (this.IntervalID!==null){return;}
this.IntervalID=setInterval(()=>{
this.info=this.info.substring(1).concat(this.info.charAt(0));
},200);
},
stop(){
clearInterval(this.IntervalID);
this.IntervalID=null;
}
}
})
</script>
</body>
</html>
效果:
【知识点】
1.定时器的使用
步骤1:定义全局的定时器编号,初始值为null
步骤2:判断定时器编号是否为null
如果不为null,直接返回(表示此时定时器已经启动,不可重复启动)
如果为null,则使用setInterval()启动定时器,并保存定时器编号到全局定时器变量中
步骤3:停止定时器
使用clearInterval()停止定时器,并把全局的定时器编号变量赋值为null
便于下次继续启动
2.Vue对象
vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
所有这些内容应该直接使用this访问,而不是【this.data.xxx、this.methods.xxx()】