Vue入门——制作一个简单的loading进度条

原创 2018年04月17日 17:57:16

刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级。

一、进度条原理

这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条。主要是让进度条的width不断增加至100%就可以啦~好了,进入正题。


二、jquery实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <title>jq进度条</title>

</head>

<body>
    <div id="app">
        <div class="progress round alert">
            <span class="meter" style="width:0%">0%</span>
        </div>
    </div>


    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script>
    <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script>
    <script>
        $(function () {
            var html = $('.meter');
            var htmlW = $('.meter').val();
            var styleW = parseInt($('.meter').css('width'));
            var clearInt = setInterval(function () {
                styleW++;
                var styleWW = styleW + '%';
                html.css('width', styleWW);
                html.html(styleWW);
                if (styleW == 100) {
                    clearInterval(clearInt);
                }
            }, 20)
        })
    </script>
</body>

</html>


三、vue实现

<!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>vue进度条</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <style>
        .bar{
            color: #fff;
            text-align: center;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="progress alert round">
            <span class="meter bar" :style="{width:proBar+'%',}" >{{proBar}}</span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script>
    <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                proBar: 0,
            },
            created(){
                this.change();
            },
            methods: {
                change: function() {
                        var clearInt = setInterval(function() {
                            app.proBar++;
                            console.log(app.prpBar);
                            if (app.proBar == 100) {
                                clearInterval(clearInt);
                            }
                        }, 20)

                }
            }
        })
    </script>

</body>

</html>

对比两段代码显然vue要方便许多,因为是双向绑定,不用来回操作dom,就很简单省心啦。

注意问题:刚开始没有实现loading效果,主要是因为用了mounted钩子函数来调用change方法(还是对生命周期理解的不到位)。实现loading效果我们需要在页面加载时自动调用change方法,所以我们应该在数据全部初始化前就执行这一操作。mounted时期已经全部完成初始化,所以便不会成功。


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_36897085/article/details/79978428

h5学习笔记:vuejs 编写进度条

最近要练习一下vuejs,vuejs可以编写一些组件。在之前一直没有尝试,今天尝试以下vuejs组件式的开发也是非常不错。下面记录一下进度条。使用Vue 编写一个全局组件。参考官方的以下的文档http...
  • hero82748274
  • hero82748274
  • 2017-12-30 17:22:21
  • 367

vue 制作进度条

HTML: {{progress}}% css: div.progressContainer{ height: 20px; ...
  • lx_1024
  • lx_1024
  • 2018-01-04 11:21:05
  • 648

Unity3D之进度条插件Loading Component

  • 2017年08月05日 19:06
  • 263B
  • 下载

vuejs最简单入门

学了后端,就得学前端配合啊,查了资料,感觉vue做前端应该比较简单。 谁知道卡在入门的地方两天,第一个例子都没有成功运行。 现在终于成功了,记录下。根本不需要像教程里写的那样,先装nodejs,再...
  • u010154462
  • u010154462
  • 2017-03-13 21:31:42
  • 1446

Unity3d中制作Loading场景进度条所遇到的问题

背景 通常游戏的主场景包含的资源较多,这会导致加载场景的时间较长。为了避免这个问题,可以首先加载Loading场景,然后再通过Loading场景来加载主场景。因为Loading场景包含的资源较少...
  • huang9012
  • huang9012
  • 2014-08-18 13:22:47
  • 20717

Vuejs入门级简单实例

Vue作为2016年最火的框架之一,以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。 今天简单介绍一下Vue的使用。 首先,需要在官网下载vuejs,或者直接用...
  • ziwoods
  • ziwoods
  • 2017-01-10 10:52:51
  • 1426

自定义LoadingView大全

那一刻 我升起风马 不为乞福 只为守候你的到来   那一天 闭目在经殿香雾中 蓦然听见 你颂经中的真言   那一日 垒起玛尼堆 不为修德 只为投下心湖的石子   那一夜 我听了一宿梵唱 不为参悟...
  • u012551350
  • u012551350
  • 2016-06-28 23:53:26
  • 6685

【初学者】基于vue的简易webapp——todolist

todolist vue入门刚几天,这是第一个webapp。 vue上手确实比较快,文档真的超级友好!赞!b( ̄▽ ̄)d     预览图     分析&总结 分析 脚手架:vue-cli  ...
  • AQingC_
  • AQingC_
  • 2017-08-10 08:56:17
  • 450

Flash cs6 学习(二) 制作一个flash进度条

(一)简单进度条制作           1,分别在第一帧和最后一帧绘制一大一小两个矩形条。           2,在中间帧右键——创建补间形状。       运行,则生成具有进度条效果的动画,如图...
  • BoRenLiang
  • BoRenLiang
  • 2015-07-26 17:29:31
  • 2093
收藏助手
不良信息举报
您举报文章:Vue入门——制作一个简单的loading进度条
举报原因:
原因补充:

(最多只允许输入30个字)