前端笔记七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）及应用（实现跑马灯效果）的主要内容，如果未能解决你的问题，请参考以下文章