前端笔记七vue基本指令(v-cloakv-textv-htmlv-bindv-on)及应用(实现跑马灯效果)
Posted 桥本环奈粤港澳分奈
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端笔记七vue基本指令(v-cloakv-textv-htmlv-bindv-on)及应用(实现跑马灯效果)相关的知识,希望对你有一定的参考价值。
一、简介
1. v-cloak
v-cloak 指令设置的样式会在 Vue 实例编译结束时,从绑定的 html 元素上被移除。所以v-cloak可以用来解决插值表达式闪烁的问题。
eg:
<!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>
<style>
[v-cloak] {
display: none
}
</style>
<body>
<div id='app'>
<p v-cloak>{{msg1}}</p>
</div>
</body>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app', //当前vue实例绑定的对象
data: { // 数据
msg1: 'msg1'
msg2: '<h1>H1元素</h1>'
} ,
methods: { // 定义当前vue实例中的可用事件
show: function() {
alert("点击事件:show")
}
}
})
</script>
</html>
2. v-text
v-text默认无闪烁问题,但是会覆盖掉元素中原本的内容,而v-cloak的插值表达式只会替换占位符,不会把整个元素内容清空。
eg: <p v-text="msg1"></p>
3. v-html
可以插入html元素而不是字符串,eg: <div v-html="msg2"></div>
这里的msg2是html元素代码
4. v-bind
用于绑定的属性指令,可以简写为:要绑定的指令,v-bind中可以有合法的表达式
eg: <input type="button" value="按钮" v-bind:title="msg1+'1234' ">
或 <input type="button" value="按钮" :title="msg1+'1234' ">
5. v-on
v-on是vue 提供的事件绑定机制,可以简写为@
eg: <input type="button" value="按钮" v-bind:title="msg" v-on:click="show">
或<input type="button" value="按钮" v-bind:title="msg" @click="show">
二、Vue实例——实现跑马灯效果
创建实例
先!+Tab创建一个html实例,然后在script中引入下载好的vue库(例子放在了新建的lib文件夹下),写入跑马灯的开启和暂停按钮,以及文本元素
<!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.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" >
<input type="button" value="暂停">
<h4>文本</h4>
</div>
</body>
</html>
加入vue基本代码,并绑定相应事件
<!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.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="暂停" @click="stop">
<h4>文本</h4>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
start(){},
stop(){}
}
})
</script>
</html>
上面的代码通过script标签引入了vue的源码,这样就可以在全局环境中使用vue的构造函数Vue
然后,插入了js代码,使用new操作符来创建一个vue实例
在创建vue实例的时候,还向Vue构造函数传入了一个对象,这个对象有el、data、methods三个属性:
- data:data属性用来存放实例的数据。Vue的核心思想是数据驱动,这里的数据就是指data属性中的数据,vue框架会监听这个数据的变化,重新渲染页面
- el:el属性用来绑定界面中的DOM元素,是将vue实例与html联系起来的纽带
- methods:methods属性用来定义事件,可以通过v-on绑定
逻辑业务上,实现文本的跑马灯效果需要定义一个定时器,文本的首字不断调动到尾部。
首先在data中定义变量msg、intervalID用于存放跑马灯文本和定时器id:
data: {
msg: '欢迎一键三连,点赞收藏关注~~~',
intervalID: null //定义定时器的id,初始值为null,代表未工作
}
然后在methods中定义跑马灯效果的开始和暂停方法:
methods: {
start() {},
stop() {}
}
1、开启
文本的首字调动到尾部:
start() { // 跑马灯的一次效果
var s = this.msg.substring(0, 1) // 开头的第一个字符作为结尾,即截取0-1子序列
var e = this.msg.substring(1) // 开头的第1个字符之后的部分作为新的开头
this.msg = e + s // 开头和结尾颠倒组成新序列,也就实现了每次开头第一个字符挪到结尾的跑马灯效果
}
这样只有一次效果,所以设置定时器,每400ms完成一次跑马灯效果
start() {
// 设置定时器,实现每400ms自动完成一次跑马灯效果
setInterval(() => { // () => 箭头函数解决this指向问题
var s = this.msg.substring(0, 1) // 开头的第一个字符作为结尾,即截取0-1子序列
var e = this.msg.substring(1) // 开头的第1个字符之后的部分作为新的开头
this.msg = e + s // 开头和结尾颠倒组成新序列,也就实现了每次开头第一个字符挪到结尾的跑马灯效果
}, 400)
}
如果跑马灯正在工作,即intervalID不为null,则忽略,否则会重复调用定时器
start() {
//如果跑马灯正在工作,即intervalID不为null,则跳过,否则会重复调用定时器
if (this.intervalID != null) return;
// 设置定时器,实现每400ms自动完成一次跑马灯效果,intervalID 为当前定时器的id
this.intervalID = setInterval(() => { //() => 箭头函数解决this指向问题
var s = this.msg.substring(0, 1) // 开头的第一个字符作为结尾,即截取0-1子序列
var e = this.msg.substring(1) // 开头的第1个字符之后的部分作为新的开头
this.msg = e + s // 开头和结尾颠倒组成新序列,也就实现了每次开头第一个字符挪到结尾的跑马灯效果
}, 400)
}
注:
本来把代码块放在定时器中setInterval(function () {代码块},400)可以实现每400ms完成一次跑马灯效果,但此时代码块内的this指向function () 这个括号内的实参,而不是data中的变量(start()的实参),所以把function()替换为()=>,将函数改造成箭头函数
2、暂停
stop() {
clearInterval(this.intervalID) //暂停当前定时器
this.intervalID = null //将intervalID 设为null,表示定时器未工作
}
最后的methods:
methods: {
start() {
//如果跑马灯正在工作,即intervalID不为null,则跳过,否则会重复调用定时器
if (this.intervalID != null) return;
// 设置定时器,实现每400ms自动完成一次跑马灯效果,intervalID 为当前定时器的id
this.intervalID = setInterval(() => { //() => 箭头函数解决this指向问题
var s = this.msg.substring(0, 1) // 开头的第一个字符作为结尾,即截取0-1子序列
var e = this.msg.substring(1) // 开头的第1个字符之后的部分作为新的开头
this.msg = e + s // 开头和结尾颠倒组成新序列,也就实现了每次开头第一个字符挪到结尾的跑马灯效果
}, 400)
},
stop() {
clearInterval(this.intervalID) //暂停当前定时器
this.intervalID = null //将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.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="暂停" @click="stop">
<h4>{{msg}}</h4>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: '欢迎一键三连,点赞收藏关注~~~',
intervalID: null //定义定时器的id
},
methods: {
start() {
//如果跑马灯正在工作,即intervalID不为null,则跳过,否则会重复调用定时器
if (this.intervalID != null) return;
// 设置定时器,实现每400ms自动完成一次跑马灯效果,intervalID 为当前定时器的id
this.intervalID = setInterval(() => { //() => 箭头函数解决this指向问题
var s = this.msg.substring(0, 1) // 开头的第一个字符作为结尾,即截取0-1子序列
var e = this.msg.substring(1) // 开头的第1个字符之后的部分作为新的开头
this.msg = e + s // 开头和结尾颠倒组成新序列,也就实现了每次开头第一个字符挪到结尾的跑马灯效果
}, 400)
},
stop() {
clearInterval(this.intervalID) //暂停当前定时器
this.intervalID = null //将intervalID 设为null,表示定时器未工作
}
}
})
</script>
</html>
参考:
以上是关于前端笔记七vue基本指令(v-cloakv-textv-htmlv-bindv-on)及应用(实现跑马灯效果)的主要内容,如果未能解决你的问题,请参考以下文章