vue实现简单loading进度条


Posted in Javascript onJune 06, 2018

刚学习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" rel="external nofollow" rel="external nofollow" > 
  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" > 
  <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" rel="external nofollow" rel="external nofollow" > 
  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" > 
  <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时期已经全部完成初始化,所以便不会成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
vue实现数字滚动效果
Jun 29 Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
vue组件实现进度条效果
Jun 06 #Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 #Javascript
You might like
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python Socket编程详细介绍
2017/03/23 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
python 实现超级玛丽游戏
2020/11/25 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
仓库理货员岗位职责
2013/12/18 职场文书
运动会广播稿400字
2014/01/25 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
PyTorch的Debug指南
2021/05/07 Python
python数字图像处理:图像的绘制
2022/06/28 Python