编程 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 相关文章推荐

JS制作手机端自适应缩放显示

Jun 11 Javascript

举例简介AngularJS的内部语言环境

Jun 17 Javascript

jquery实现仿JqueryUi可拖动的DIV实例

Jul 31 Javascript

JavaScript实现公历转农历功能示例

Feb 13 Javascript

基于AGS JS开发自定义贴图图层

Mar 31 Javascript

微信小程序商城项目之侧栏分类效果（1）

Apr 17 Javascript

微信小程序表单验证错误提示效果

May 19 Javascript

JS实现的JSON数组去重算法示例

Apr 11 Javascript

深入了解javascript 数组的sort方法

Jun 01 Javascript

微信域名检测接口调用演示步骤（含PHP、Python）

Dec 08 Javascript

javascrpt密码强度校验函数详解

Mar 18 Javascript

JS实现简单的九宫格抽奖

Jun 28 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

PHP_MySQL教程-第一天

2007/03/18 PHP

php做下载文件的实现代码及文件名中乱码解决方法

2011/02/03 PHP

PHP中使用curl入门教程

2015/07/02 PHP

PHP在线书签系统分享

2016/01/04 PHP

PHP微信H5支付开发实例

2018/07/25 PHP

[原创]静态页面也可以实现预览列表不同的显示方式

2006/10/14 Javascript

eval的两组性能测试数据

2012/08/17 Javascript

js判断鼠标左、中、右键哪个被点击的方法

2015/01/27 Javascript

JS日期格式化之javascript Date format

2015/10/01 Javascript

JS获取填报扩展单元格控件的值的解决办法

2017/07/14 Javascript

javascript浏览器用户代理检测脚本实现方法

2017/10/27 Javascript

JS中常用的消息框总结

2018/02/24 Javascript

分享5个顶级的JavaScript Ajax组件库

2018/09/16 Javascript

vue-cli构建vue项目的步骤详解

2019/01/27 Javascript

vue-devtools的安装和使用步骤详解

2019/10/17 Javascript

微信小程序利用for循环解决内容变更问题

2020/03/05 Javascript

python获得linux下所有挂载点（mount points）的方法

2015/04/29 Python

基于numpy中数组元素的切片复制方法

2018/11/15 Python

解决python中无法自动补全代码的问题

2018/12/04 Python

pandas实现DataFrame显示最大行列,不省略显示实例

2019/12/26 Python

TensorFlow加载模型时出错的解决方式

2020/02/06 Python

Python中包的用法及安装

2020/02/11 Python

Python selenium如何打包静态网页并下载

2020/08/12 Python

Python系统公网私网流量监控实现流程

2020/11/23 Python

python音频处理的示例详解

2020/12/23 Python

澳大利亚首屈一指的在线购物目的地：Kogan.com

2017/02/02 全球购物

法学专业应届生求职信

2013/10/16 职场文书

好军嫂事迹材料

2014/01/15 职场文书

优秀工会工作者事迹材料

2014/06/02 职场文书

项目经理任命书内容

2014/06/06 职场文书

党的生日演讲稿

2014/09/10 职场文书

2014年全国爱牙日宣传活动方案

2014/09/21 职场文书

《一面五星红旗》教学反思

2016/02/23 职场文书

2016年党员创先争优公开承诺书

2016/03/25 职场文书

个人工作总结怎么写？

2019/04/09 职场文书

Python+Appium新手教程

2021/04/17 Python