编程 Javascript

Vue SPA 初次进入加载动画实现代码

Posted in Javascript onNovember 14, 2019

在app挂载的div同级处写一个加载动画，例如：

<body class="font-hei">
  <div class="wrap" id="loader">
   <div>
    <div class="mult2rect mult2rect1"></div>
    <div class="mult2rect mult2rect2"></div>
    <div class="mult2rect mult2rect3"></div>
    <div class="mult2rect mult2rect4"></div>
    <div class="mult2rect mult2rect5"></div>
   </div>
  </div>
 <div id="app" style="min-height: 100vh"></div>

加载完成后，在App.vue的钩子函数内移除这个div。

created: function() {
  document.body.removeChild(document.getElementById('loader'));
}

以上这篇Vue SPA 初次进入加载动画实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

Vue SPA 初次进入加载动画实现代码

- Author -

川大宝啊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JavaScript脚本实现Web页面信息交互

Dec 21 Javascript

js 键盘记录实现(兼容FireFox和IE)

Feb 07 Javascript

jQuery Validation插件remote验证方式的Bug解决

Jul 01 Javascript

jQuery 获取和设置select下拉框的值实现代码

Nov 08 Javascript

利用JS进行图片的切换即特效展示图片

Dec 03 Javascript

javascript数组操作(创建、元素删除、数组的拷贝)

Apr 07 Javascript

JavaScript截取字符串的2个函数介绍

Aug 27 Javascript

javascript中var的重要性分析

Feb 11 Javascript

js实现select跳转菜单新窗口效果代码分享(超简单)

Aug 21 Javascript

Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

Aug 12 Javascript

Vuejs+vue-router打包+Nginx配置的实例

Sep 20 Javascript

vue+element 模态框表格形式的可编辑表单实现

Jun 07 Javascript

构建大型 Vue.js 项目的10条建议(小结)

Nov 14 #Javascript

vue实现修改图片后实时更新

Nov 14 #Javascript

Vue中img的src是动态渲染时不显示的解决

Nov 14 #Javascript

JQuery发送ajax请求时中文乱码问题解决

Nov 14 #jQuery

vue-cli3.X快速创建项目的方法步骤

Nov 14 #Javascript

vue.config.js常用配置详解

Nov 14 #Javascript

解决vue项目中页面调用数据在数据加载完毕之前出现undefined问题

Nov 14 #Javascript

You might like

如何将数据从文本导入到mysql

2006/10/09 PHP

IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)

2006/12/06 PHP

php使用正则表达式去掉html中的注释方法

2016/11/03 PHP

老生常谈PHP面向对象之解释器模式

2017/05/17 PHP

PHP获取星期几的常用方法小结

2018/12/18 PHP

jQuery1.5.1 animate方法源码阅读

2011/04/05 Javascript

juery框架写的弹窗效果适合新手

2013/11/27 Javascript

JS实现新浪微博效果带遮罩层的弹出框代码

2015/10/12 Javascript

jquery基础知识第一讲之认识jquery

2016/03/17 Javascript

JavaScript面试题大全(推荐)

2016/09/22 Javascript

轻松实现jquery选项卡切换效果

2016/10/10 Javascript

BootstrapTable refresh 方法使用实例简单介绍

2017/02/20 Javascript

layer弹窗插件操作方法详解

2017/05/19 Javascript

vue scroller返回页面记住滚动位置的实例代码

2018/01/29 Javascript

Vue 莹石摄像头直播视频实例代码

2018/08/31 Javascript

vue观察模式浅析

2018/09/25 Javascript

[05:56]第十六期——新进3大C之小兔基

2014/06/24 DOTA

[20:30]职业巡回赛回顾

2018/08/09 DOTA

Python多进程并发(multiprocessing)用法实例详解

2015/06/02 Python

Python+django实现文件下载

2016/01/17 Python

Python之re操作方法(详解)

2017/06/14 Python

Python多层装饰器用法实例分析

2018/02/09 Python

Django框架视图层URL映射与反向解析实例分析

2019/07/29 Python

python中matplotlib条件背景颜色的实现

2019/09/02 Python

如何使用Python破解ZIP或RAR压缩文件密码

2020/01/09 Python

python使用bs4爬取boss直聘静态页面

2020/10/10 Python

如何在存储过程中使用Loop

2016/01/05 面试题

完美主义个人的自我评价

2014/02/17 职场文书

初三开学计划书

2014/04/27 职场文书

2014派出所所长群众路线对照检查材料思想汇报

2014/09/18 职场文书

无财产离婚协议书范本

2014/10/28 职场文书

2014年学生党支部工作总结

2014/12/20 职场文书

2014年个人年终总结

2015/03/09 职场文书

2016毕业实习单位评语大全

2015/12/01 职场文书

服务行业标语口号

2015/12/26 职场文书

利用正则表达式匹配浮点型数据

2022/05/30 Java/Android