前端笔记七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三个属性:

  • datadata属性用来存放实例的数据。Vue的核心思想是数据驱动,这里的数据就是指data属性中的数据,vue框架会监听这个数据的变化,重新渲染页面
  • elel属性用来绑定界面中的DOM元素,是将vue实例与html联系起来的纽带
  • methodsmethods属性用来定义事件,可以通过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>

参考:

v-cloak、v-text、v-html的基本使用v-bindv-on跑马灯 上跑马灯 下

以上是关于前端笔记七vue基本指令(v-cloakv-textv-htmlv-bindv-on)及应用(实现跑马灯效果)的主要内容,如果未能解决你的问题,请参考以下文章

前端笔记八vue指令的事件修饰符

前端笔记八vue指令的事件修饰符

Vue.js高效前端开发 • Vue基本指令

Vue.js高效前端开发 • Vue基本指令

B站学习Vue入门笔记

Vue的基本用法——JavaEE笔记