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的数学建模---高阶样条插值
为了满足对函数光滑性的需要,我们可以使用一种有弹性的长条(称之为样条),强迫它弯曲通过样本点. import numpy as npimport matplotlib.pylab as plfrom ...
- [排序算法] 归并排序 (C++)
归并排序解释 归并排序 Merge Sort 是典型的分治法的应用,其算法步骤完全遵循分治模式. 分治法思想 分治法 思想: 将原问题分解为几个规模较小但又保持原问题性质的子问题,递归求解这些子问题, ...
- WebApi实现Token验证
为什么要实现Token呢.在我们客户端发送请求时,如果没有校验数据是否合法那么就有可能造成非法请求泄露我们的数据 实现Token的思路 1.客户端通过用户名和密码来获取Token 通过自己的账号和密码 ...
- JAVA-面向对象之对象拷贝
Java 中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.用作方法参数或返回值时,会有值传递和引用(地址)传递的差别. Map对象 测试01-等号赋值: @Test p ...
- MIUI12解决安装charles抓包安装证书后还是提示证书不安全
前言 我抓包这么长时间,这个问题我还是第一次遇到,导致我反复试验,明明安装证书还是提示不安全.我用新买的手机MIUI 12系统弄了半天 解决方案 首先下载证书这部分是一个坑,小米 MIUI 12系统下 ...
- 集群部署看过来，低代码@AWS智能集群的架构与搭建方案
为了帮助充分利用AWS的托管服务快速构建起一套集群环境,彻底去掉"单一故障点",实现最高的可用性,我们准备了<低代码智能集群@AWS的架构与搭建方案>看完本文,带你掌握 ...
- 【Java SE进阶】Day10 缓冲流、转换流、序列化流 、打印流
一.缓冲流 1.概述 比普通流更强大的IO流,可以增加读写的效率 组成 缓冲输入流:BufferedInputStream.BufferedReader 缓冲输出流:BufferedOutputStr ...
- 【大数据面试】ClickHouse：介绍、特点、数据类型、引擎、操作、副本、分片
1.介绍 开源的列式存储数据库(DBMS),由C++编写,用于在线分析处理查询(OLAP) 可以通过SQL查询实时生成分析数据报告 解释: DBMS:数据库管理系统 常见的列式存储数据库:Hbase. ...
- CountDownLatch闭锁源码解析(基于jdk11)
目录 CountDownLatch闭锁源码解析(基于jdk11) 1.1 CountDownLatch概述 1.2 CountDownLatch原理 1.2.1 基本结构(jdk11) 1.2.2 a ...
- 开发一个最简单的iOS App
开发一个最简单的iOS App 大家好,我是孜孜不倦学习的Zhangbeihai. 上月底我组织了[组队学习]TensorFlow 入门课程(中文) ,截至目前有300多同学加入.主要就是 Tenso ...