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: ...
随机推荐
- 微信公众号调试经常报access_token is invalid or not latest rid
是因为我没有使用中控服务器,所以服务器上使用同一个appid和secret获取了access_token 调试的时候再重新获取了一个新的access_token,所以导致微信服务器发放了新的acces ...
- git回滚操作系列
git回滚操作系列 准备工作 本地环境 线上环境 分支 master 场景1 线上环境回滚,同步线上与本地操作 线上环境当前与本地一致 先把线上回滚至早期 获取提交日志 [root@root]# gi ...
- 第2-4-3章 规则引擎Drools基础语法-业务规则管理系统-组件化-中台
目录 4. Drools基础语法 4.1 规则文件构成 4.2 规则体语法结构 4.3 注释 4.4 Pattern模式匹配 4.5 比较操作符 4.5.1 语法 4.5.2 操作步骤 4.6 执行指 ...
- 第2-4-5章 规则引擎Drools高级语法-业务规则管理系统-组件化-中台
目录 6. Drools高级语法 6.1 global全局变量 6.2 query查询 6.3 function函数 6.4 LHS加强 6.4.1 复合值限制in/not in 6.4.2 条件元素 ...
- 不用USB，通过adb无线调试安卓手机页面
以前真机调试手机页面,都是使用数据线连接手机和电脑,近日身边没有USB数据线,折腾了下如何不依赖数据线只用无线调试手机页面,教程如下. 本教程适用于安卓11以及以上版本.否则应该使用USB数据线连接. ...
- 如何基于 Redis 实现分布式锁
什么是分布式锁 分布式锁:不同进程必须以互斥方式使用共享资源的一种锁方法实现. 实现分布式锁的基础 互斥.任何时刻,只有一个客户端持有锁. 无死锁.最终总是有可能获得锁,即使持有锁的客户端已经崩溃. ...
- Vuex极速入门
01.什么是Vuex? 1.1.为什么需要状态管理? 在复杂的系统中,我们会把系统按照业务逻辑拆分为多个层次.多个模块,采用组件式的开发方式.而此时不同模块.父子模块之间的通信就成了一个问题. 为了解 ...
- PyTorch复现GoogleNet学习笔记
PyTorch复现GoogleNet学习笔记 一篇简单的学习笔记,实现五类花分类,这里只介绍复现的一些细节 如果想了解更多有关网络的细节,请去看论文<Going Deeper with Conv ...
- 【RocketMQ】主从模式下的消费进度管理
在[RocketMQ]消息的拉取一文中可知,消费者在启动的时候,会创建消息拉取API对象PullAPIWrapper,调用pullKernelImpl方法向Broker发送拉取消息的请求,那么在主从模 ...
- 宝塔渗透之msf代理入侵
前言 在渗透中遇到内网主机是一层接一层的拓扑形式,可以采用多层代理加路由转发访问,便于在渗透中出现网段隔绝可以使用此方法跳出局限 实验环境 kali: 192.168.75.131 target-ce ...