Vue中 v-on: 指令讲解及跑马灯效果制作

最新推荐文章于 2024-04-18 23:45:00 发布

@带甜味的盐@

最新推荐文章于 2024-04-18 23:45:00 发布

阅读量524

点赞数

分类专栏：前端 SYW 文章标签： Vue v-on：指令跑马灯效果

本文链接：https://blog.csdn.net/s_y_w123/article/details/86417420

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

Vue中v-on：指令讲解及跑马灯效果

v-on：指令讲解

今天我要讲的是Vue中的v-on：指令，至于Vue是什么，我就不再赘述了，我说一下v-on：指令是干什么用的。
v-on：指令为我们提供了一种事件绑定机制，直白点来说就是为页面上的元素绑定事件的。
v-on:指令的简写形式@

一般情况下，以点击事件为例，如果我们要给元素设置点击事件的话，一般分两步走：

选中这个元素。
给其设置onclick事件。

即便我们把事件封装的再巧妙，但是这样的操作就违背了我们Vue脱离DOM操作的本意，所以Vue为我们提供了v-on:这一解决方案。

先来看一下v-on:指令的用法(以点击事件为例)：

<body>
    <div id="app">
        <!-- Vue中提供了 v-on: 事件绑定机制 -->
        <input type="button" value="按钮" v-on:click="show">
        <input type="button" value="按钮" @click="show">
    </div>
	<!-- 引入Vue包 -->
    <script src="lib/vue-2.5.17/vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            methods: {//这个methods属性中定义了当前Vue实例所有可用的方法
                show:function(){
                    alert('hello');
                }
            }
        });
    </script>
</body>

可以看到v-on:指令的用法很简单，我把它总结成三个方面：

在你需要设置事件的元素里写上v-on:这一指令，或者其简写形式@。
在指令后面跟上你要设置的事件名称。
然后只需要在Vue的methods属性中定义你需要的方法，然后写到事件后面。

想必你已经对Vue中的v-on:指令有了一定的了解，也已经会使用了，还是要提一下，v-on:指令绑定的事件可以有很多，不要误以为只能绑定click事件。

跑马灯效果制作

接下来，我们利用我们前面讲的v-on:指令制作一个跑马灯效果（字幕循环滚动）。

首先，我们来分析一下跑马灯效果要怎么实现：

字幕滚动我们肯定要把需要显示的字幕加载到页面上。
```

<h4>{{msg}}</h4>
```

让字幕循环滚动显示无非就是让字符串中的首字符拼接到字符串最后的位置。

//获取到头的第一个字符
var start = this.msg.substring(0,1);
//获取到后面的所有字符
var end = this.msg.substring(1);
//重新拼接得到的字符串，并赋值this.msg
this.msg = end+start

要让字符一直滚动，这就需要用到定时器了，实现自动剪切。
```
setInterval(function(){
    //字符串剪切操作
},400);
```
停止的时候清除定时器，开始的时候打开定时器。
```
clearInterval(//清除的定时器);
```

了解了怎么实现跑马灯效果，我们把这些分析用代码实现一下（可以复制运行一下）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入vue包 -->
    <script src="lib/vue-2.5.17/vue.js"></script>
</head>
<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">

        <h4>{{msg}}</h4>
    </div>

    <script>
        //注意在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.属性名或者this.方法名来进行访问
        //这里的this，就表示我们 new 出来的VM实例对象
        var  vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪~~！',
                intervalId:null //在data上定义定时器Id
            },
            methods: {
                lang:function(){
                    //判断定时器是否重复开启
                    if(this.intervalId != null) return;
                    
                    // var _this = this;取巧的方式，先复制一份this的指向
                    
                    //使用ES6中箭头函数，是箭头函数内部的指向和外部this指向保持一致
                    this.intervalId = setInterval(() => {
                        //获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到后面的所有字符
                        var end = this.msg.substring(1);
                        //重新拼接得到的字符串，并赋值this.msg
                        this.msg = end+start
                    },400);

                    //Vue实例会监听自己身上data中所有数据的改变只要一发生变化，就会自动把最新的数据，从data中同步到页面中去
                },
                stop:function(){//停止定时器
                    clearInterval(this.intervalId);
                    //每当清除了定时器之后，需要把intervalId置为null
                    this.intervalId = null;
                }
            }
        });
    </script>
</body>
</html>

下面我来简单的分析一下代码中的某些逻辑：

通过this.属性名或者this.方法名来进行访问，this当前的指向是当前Vue实例。
在定时器这个区域里使用this我们的指向是当前的定时器，所以为了保持this的指向不变，我们有两种方法：
- 提前复制一份this指向。
- 使用ES6中的箭头函数，作用我在代码注释中有说明。
定时器不能重复开启，否则会导致滚动速度随着点击次数变的非常快，判断定时器是否重复开启的思路：
- 设置一个变量，令其值为null。
- 让这个值和定时器关联起来，开启定时器时，定时器会返回一个值，无论返回什么，这个变量的值一定会有变化。
- 每次点击按钮开始定时器时，判断变量的值。
- 点击停止按钮时，清除定时器，并把变量的值重新置为null。

以上就是全部内容了，希望对你有帮助。

@带甜味的盐@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中 v-on: 指令讲解及跑马灯效果制作

Vue中v-on：指令讲解及跑马灯效果v-on：指令讲解今天我要讲的是Vue中的v-on：指令，至于Vue是什么，我就不再赘述了，我说一下v-on：指令是干什么用的。v-on：指令为我们提供了一种事件绑定机制，直白点来说就是为页面上的元素绑定事件的。v-on:指令的简写形式@一般情况下，以点击事件为例，如果我们要给元素设置点击事件的话，一般分两步走：选中这个元素。给其设置on...
复制链接

扫一扫