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: ...
随机推荐
- 【Devexpres】spreadsheetControl冻结行
Worksheet worksheet = this.spreadsheetControl1.ActiveWorksheet; worksheet.Import(datatable, true, 0, ...
- KVC原理与数据筛选
作者:宋宏帅 1 前言 在技术论坛中看到一则很有意思的KVC案例: @interface Person : NSObject @property (nonatomic, copy) NSString ...
- c++ trivial, standard layout和POD类型解析
目录 1. trivial类型 2. standard layout类型 3. 集大成者,POD(Plain Old Data)类型 4. 测试代码 1. trivial类型 占用一片连续的内存,编译 ...
- 【SQL】窗口函数：求数据组内累计值和累计百分比
〇.概述 1.所需资料 窗口函数实现组内百分比.累计值.累计百分比:https://blog.csdn.net/weixin_39751959/article/details/88828922 2.背 ...
- 【每日一题】【DFS】【BFS】【队列】2021年12月5日-199. 二叉树的右视图
解答: /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * ...
- 互联网最全cka真题解析-2022
1.CKA真题解析kubectl自动补全及帮助信息1.配置kubectl自动补全apt install bash-completion source <(kubectl completion b ...
- 个人电脑公网IPv6配置
一.前言 自己当时以低价买的阿里ECS云服务器马上要过期了,对于搭建个人博客.NAS这样服务器的需求购买ECS服务器成本太高了,刚好家里有台小型的桌面式笔记本,考虑用作服务器,但是公网IPv4的地址实 ...
- Django视图层/FBV与CBV/jsonResponse对象/form表单上传文件/request对象获取文件
目录 虚拟环境 视图层views 三板斧 jsonResponse对象 form如何上传文件/request对象获取文件 request对象方法 FBV与CBV CBV源码解析 虚拟环境 每创建一个虚 ...
- 布尔值、元组、集合、input、格式化输出、赋值、运算符
今日内容总结 目录 今日内容总结 数据类型之布尔值bool 数据类型之元组tuple 数据类型之集合set 与用户交互 1.获取输入: input 2.输出内部信息 3.在python2中与pytho ...
- 时隔3个月，Uber 再遭数据泄露...
在今年9月,Uber 就发生过一起数据泄露事件,尽管黑客并无意发动大规模攻击或以此来获取巨额利益,但其成功获取对 Uber 所有敏感服务的完全管理员访问权限仍令人后怕.而在上周,名为"Ube ...