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: ...
随机推荐
- python面试题常用语句
一.比较与交换1.比较并输出大的 print(a if a>b else b) 2.交换两个元素 a,b = b,alist1[i],list[j]=list1[j],list[i] 二.排序 ...
- 第2-3-7章 个人网盘服务接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.8 导入其他接口代码 5.8.1 接口导入-分页查询附件 5.8.2 接口导入-根据业务类型/业务id查询附件 5.9 导入网盘服务接口 5.9.1 导入FileController 5.9 ...
- i春秋phone number
点开题目是一个普普通通的登录注册界面,随便注册一个点进去有两个功能,一个是查看电话和你相同的用户,一个是登出. 点击查询就可以看到用户数 这里有访问数据库的操作应该,所以就应该用数据库注入来解题. 又 ...
- CmakeLists简单使用总结
单文件工程和多级目录工程CmakeLists.txt编写分享 你若发现该帖中有待商榷的地方,还请指正赐教,先行拜谢了! 1 main.c单文件工程CmakeLists.txt 1.1 目录结构 1.2 ...
- 教你用Python制作BMI计算器
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用Python相关知识,做一个BMI计算器的案例.你可以通过控制台的提示信息,输入身高和体重,注意单位,系统会自动计算出BMI ...
- MySQL进阶实战1，数据类型与三范式
一.选择优化的数据类型 MySQL支持的数据类型非常多,选择正确的数据类型对于获得高性能至关重要. 1.更小的 一般情况下,应该尽量使用较小的数据类型,更小的数据类型通常更快,因为占用更少的磁盘.内存 ...
- Android 内存缓存框架 LruCache 的实现原理，手写试试？
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 在之前的文章里,我们聊到了 LRU 缓存淘汰算法,并且分析 Java 标准库中支持 ...
- 更强大的远程开发，Remote Tunnels 正式发布预览版！
Visual Studio Code 的核心是一个代码编辑器,它通过我们的远程开发经验与其他环境集成,变得更加强大和灵活: 你可能没有想到,但 VS Code 有一个内置的命令行界面(CLI),可以让 ...
- Docker的作用
绝大部分应用,开发者都可以通过docker build创建镜像,通过docker push上传镜像,用户通过docker pull下载镜像,用docker run运行应用. 用户不需要再去关心如何搭建 ...
- Django框架F查询与Q查询(全面了解)
一:F与Q查询 1.F查询的作用 能够帮助你直接获取到列表中某个字段对应的数据 注意: 在操作字符串类型的数据的时候, F不能够直接做到字符串的拼接 2.查询卖出书大于库存数的书籍 # 导入F查询 f ...