vue页面加载闪烁的问题以及解决方案
一、原因：
问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果
下图：加载闪烁问题效果
原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板
二、解决：
- 在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[v-cloak] {diaplay : none;}
- v-cloak 这个指令可以隐藏未编译的Mustache标签，直到实例准备完毕。
- 原理：利用 v-cloak 这个指令使用 display:none 来进行隐藏使用：直接在app这个写一个 v-cloak借助一个CSS[v-cloak]{display:none}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{msg}}
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
/*
问题: 当我们打开Vue页面的时候,如果弱网环境,会出现一个闪烁的效果
原因: Vue还来不及处理的模板
解决: 使用 v-cloak 来解决Vue这个打开页面的闪烁的问题
原理: 利用 v-cloak 这个指令使用 display:none 来进行隐藏
使用: 直接在app这个写一个 v-cloak
借助一个CSS
[v-cloak]{
display:none
}
*/
setTimeout(() => {
Vue.createApp({
data() {
return {
msg:'hello world',
};
},
}).mount("#app");
},3000);
</script>
</html>
vue页面加载闪烁的问题以及解决方案的更多相关文章
- 当vue 页面加载数据时显示 加载loading
参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...
- elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字
elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...
- vue页面加载前显示{{代码}}的原因及解决办法
进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...
- Vue页面加载时，触发某个函数的方法
需要在加载页面的时候调用生成验证码的click事件函数 解决方法如下,利用Vue中的mounted mounted:function(){ this.createcode();//需要触发的函数 } ...
- vue:绑定数据的vue页面加载会闪烁问题
1:在挂在数据的容器加上属性 v-cloak 2:在css中添加如下代码 但有时候还是会不起作用,可能原因有两个 2.1:display属性被更高权限的display属性覆盖了,我们增加权限就好了 2 ...
- vue解决加载闪烁问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- Vue 页面加载闪现代码问题
CSS中 [v-cloak] { display: none; } HTML中 <div v-cloak> {{ message }} </div> 显示代码主要是{{}}这个 ...
- vue 使用v-cloak让在页面加载时不显示{{}}花括号
官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...
- 使用 v-cloak 防止页面加载时出现 vue.js 的变量名
知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
随机推荐
- BrokenPipeError错误和subprocess.run()超时参数在Windows上无效
1.问题的发现 今天,一个在windows上运行良好的python脚本放到linux下报错,提示错误 BrokenPipeError: [Errno 32]Broken pipe.经调查是subp ...
- MySQL进阶实战2，那些年学过的事务
@ 目录 一.MySQL服务器逻辑架构 二.并发控制 1.读写锁 2.锁粒度 3.表锁 4.行级锁 三.事务 1.原子性(atomicity) 2.一致性(consistency) 3.隔离性(iso ...
- 疫情可视化part3
前言 之前在part2中说的添加自定义主题配色已经开发完成了,除此之外我还添加了一些的3d特效. 前期文章 这是part1的文章:https://blog.csdn.net/xi1213/articl ...
- 2.2：常用的Python数据类型、字符串、dtype
一.内置数据类型 1.整型 2.浮点型 3.字符串 4.复数 5.布尔类型bool 6.None类型 二.字符串 1.从键盘输入数据 s = input() 2.用eval去引号求值 eval(&qu ...
- Python requests 上传文件(以上传图片为例)
from requests_toolbelt import MultipartEncoderimport requests encoderl = MultipartEncoder( fields = ...
- MongoDB安全加固，防止数据库攻击删除勒索威胁
前言: 今天发现前段时间自己搭建的一个系统的MongoDB数据找不到了,觉得很奇妙,然后登上MongoDB数据库发现多了一个名为READ__ME_TO_RECOVER_YOUR_DATA的数据库,里面 ...
- PyTorch复现VGG学习笔记
PyTorch复现ResNet学习笔记 一篇简单的学习笔记,实现五类花分类,这里只介绍复现的一些细节 如果想了解更多有关网络的细节,请去看论文<VERY DEEP CONVOLUTIONAL N ...
- Django静态文件配置、form表单、request对象、连接数据库、ORM
目录 静态文件配置 静态文件相关配置 1.接口前缀 浏览器停用缓存 2.接口前缀动态匹配 form表单 action 控制数据提交的地址 method 控制数据提交的方法 请求方法补充 get: 朝服 ...
- plsql developer切换用户
方法1: 1.双击plsql developer桌面软件图标启动软件 2.在连接窗口中填写连接信息,连接数据库 3.在新建窗口下拉选项中,选择命令窗口功能 4.在工作区内会出现当前用户连接数据库的窗口 ...
- 如何配置 SLO
前言 无论是对外提供 IaaS PaaS SaaS 的云公司,还是提供信息技术服务的乙方公司,亦或是金融 制造等各行各业的数据中心.运维部门,我们的一个非常重要的合同承诺或考核评估指标就是:SLA(即 ...