Vue学习笔记（一）：跑马灯的实现
Vue学习笔记（一）：跑马灯的实现
首先根据vue的基础框架搭建出需要呈现的文件（将需要进行跑马灯操作的程序进行文字呈现）
程序分析：
1. 给 【触发】 按钮，绑定一个点击事件 v-on
2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
tips：
1. 如何定义一个基本的Vue代码结构
2. 插值表达式 和 v-text
3. v-cloak
4. v-html
5. v-bind Vue提供的属性绑定机制 缩写是 :
6. v-on Vue提供的事件绑定机制 缩写是 @
1、创建html例程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2、先导入vue包 <script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-2.4.0.js"></script> <!--导入Vue包-->
3、创建一个Vue例程
1、substring()函数
start:substring(0,1) --> 第零个字符到第一个字符
stop:substring(1) --> 第一个字符到结尾
跑马灯效果触发：将第一个字符赋值到最后一个字符
var vm = new Vue({
el:'#app',// VM实例名称
data:{// 数据属性
msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
},
methods:{// 方法属性
begin() {
console.log(this.msg)
// 获取到头的第一个字符/
var start = this.msg.substring(0,1)
// 获取到后面的所有字符串
var end = this.msg.substring(1)
// 对this.msg重新赋值
this.msg = end + start
}
}
})2、 setInterval()函数
调用定时器函数setInterval(() => {事件},时间)
重置定时器clearInterval(触发状态)
设置跑马灯定时器
1：状态定义参数 -- intervalId: null
2：状态参数监测，避免二次触发 -- begin(){ if (this.intervalId != null) return; }
3：状态参数重置，使跑马灯可重新触发 -- stop(){ this.intervalId = null; }
var vm = new Vue({
el:'#app',// VM实例名称
data:{// 数据属性
msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
msg2:'点我开始',
msg3:'点我停止',
// 定义触发状态
intervalId: null
},
methods:{// 方法属性
begin() {
// 跑马灯运行状态监测，避免重复出发跑马灯效果
if (this.intervalId != null) return;
//调用定时器函数setInterval(() => {事件},时间)
this.intervalId = setInterval(() =>{
// console.log(this.msg)
// 获取到头的第一个字符/
var start = this.msg.substring(0,1)
// 获取到后面的所有字符串
var end = this.msg.substring(1)
// 对this.msg重新赋值
this.msg = end + start
}, 400)
},
stop() {
// 重置定时器clearInterval(触发状态)
clearInterval(this.intervalId)
// 跑马灯状态重置
this.intervalId = null;
}
}
})
源代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script> <!--导入Vue包-->
</head>
<body>
<!-- 控制区 -->
<div id="app">
<!-- 定于输出框 -->
<h4>{{msg}}</h4>
<!-- 定义开始按键 input type='类型' value='名称' :title="悬停显示内容" @click="点击后发生的事件" -->
<input type="button" value="开始" :title="msg2" @click="begin">
<!-- 定义结束案件 -->
<input type="button" value="结束" :title="msg3" @click="stop">
</div>
<!-- 定义vue内app例程 -->
<script>
var vm = new Vue({
el:'#app',// VM实例名称
data:{// 数据属性
msg:'天下熙熙，皆为利来；天下攘攘，皆为利往',
msg2:'点我开始',
msg3:'点我停止',
// 定义触发状态
intervalId: null
},
methods:{// 方法属性
begin() {
// 跑马灯运行状态监测，避免重复出发跑马灯效果
if (this.intervalId != null) return;
//调用定时器函数setInterval(() => {事件},时间)
this.intervalId = setInterval(() =>{
// console.log(this.msg)
// 获取到头的第一个字符/
var start = this.msg.substring(0,1)
// 获取到后面的所有字符串
var end = this.msg.substring(1)
// 对this.msg重新赋值
this.msg = end + start
}, 400)
},
stop() {
// 重置定时器clearInterval(触发状态)
clearInterval(this.intervalId)
// 跑马灯状态重置
this.intervalId = null;
}
}
})
</script>
</body>
</html>
本文为作者独立编写
本BLOG上所有的原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)