v-on 、时间函数、跑马灯制作

158nothing

于 2020-01-20 11:44:40 发布

阅读量101

点赞数

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/qq_44643011/article/details/104044415

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

啊，先吐槽一下最近的状态吧，真是一日不如一日啊2333，希望自己可以坚持到开学吧！！话不多说，先放代码嘻嘻，如果有人看到里面的东西的话，具体内容不要在意哦…做调侃！！！

<!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>
    <script src="../code/lib/2.6.11vue.js"></script>
    <style>
        .jkl {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <!--创建一个Vue可以控制的区域-->
    <div id="app">
        <p class="jkl">{{mes}}</p>
        <input type="button" value="浪起来" @click='start'>
        <input type="button" value="稳住，低调" @click='stop'>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mes: '荣陈是小🐖！',
                setIntervalid: null
            },
            methods: {
                start() {
                    if (this.setIntervalid === null) {
                        this.setIntervalid = setInterval(() => {
                            var first = this.mes.substring(0, 1)
                            var last = this.mes.substring(1)
                            this.mes = last + first
                        }, 300)
                    } else {
                        return this.setIntervalid
                    }
                },
                stop() {
                    clearInterval(this.setIntervalid)
                    this.setIntervalid = null
                }
            }
        })
    </script>
</body>

</html>

v-on

	1.首先我觉得最简单的就是先记住它的缩写 即‘@’ 没错就是  艾特   so easy  吧！
	2.vue  的 v-on 指令就是把 某属性值看成一个 js表达式，可以进行js的表达式操作(或者说是变量名？？，反正差不多)

时间函数 && 跑马灯

首先我们看到的是一些正常的vue操作
按照htm代码顺序复习一下

	1.导入vue.js的包
	2.创建一个Vue控制的区域
	3.创建一个Vue实例
	4.在Vue实例里面写一下羞羞的东东，包括el，data，methods(暂时只接触到这么多辣，嘻嘻)
	5.再多bb一句，访问data里面的变量，都要用data.变量名来访问，后面关闭这个计时函数也是需要引入某个参数的。

start() {
                    if (this.setIntervalid === null) {
                        this.setIntervalid = setInterval(() => {
                            var first = this.mes.substring(0, 1)
                            var last = this.mes.substring(1)
                            this.mes = last + first
                        }, 300)
                    } else {
                        return this.setIntervalid
                    }
                }

这里就先放上一个start 方法吧，setIntervalid 函数定时器，没学nodejs，所以这个就先看成两个参数的函数吧（箭头函数也没学），第一个就是定时器开始时要执行的函数，然后第二个就是每个定时器的时间差，在本例中就是300ms

stop() {
                    clearInterval(this.setIntervalid)
                    this.setIntervalid = null
                }

有开始就要有停止，stop() 方法 clearInterval(this.setInterval) 就是这样clear掉的。

跑马灯原理

其实就是获取Vue实例里面的某个字符串，截取首尾两个字符串，再按照尾 + 首的顺序赋值给this.mes，Vue提供的机制内，只要data里面的数据发生变化，那么就不需要关心一些其他的事情了，然后就是具体细节的处理，start()方法里面的判断是为了防止同时开启多个计时器，stop()方法里面最后将
this.setInterval = null
是为了可以继续进行操作并在上次停止的位置继续操作mes字符串。