Vue SPA 第一次进入加载动画实现代码
人气:2在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单页应用首屏优化实践
- 详解vue之自行实现派发与广播(dispatch与broadcast)
- Vue实现boradcast和dispatch的示例
- vue-cli单页面预渲染seo-prerender-spa-plugin操作
- vuex中store存储store.commit和store.dispatch的用法
- Vue实现数据表格合并列rowspan效果
- vue spa应用中的路由缓存问题与解决方案
- 解决Vue+Electron下Vuex的Dispatch没有效果问题
- VUE解决微信签名及SPA微信invalid signature问题(完美处理)
- 详解vuex中action何时完成以及如何正确调用dispatch的思考
- Vue SPA 首屏优化方案
加载全部内容