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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript面向对象编程
Mar 02 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
JavaScript迭代器的含义及用法
Jun 21 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
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
使用python实现个性化词云的方法
2017/06/16 Python
python学生信息管理系统(完整版)
2020/04/05 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
开服装店计划书
2014/08/15 职场文书
年检委托书
2014/08/30 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
最美乡村教师观后感
2015/06/11 职场文书
单身证明格式样本
2015/06/15 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis