一、原因：

问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果
下图：加载闪烁问题效果

原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板

二、解决：

  1. 在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[v-cloak] {diaplay : none;}
  2. v-cloak 这个指令可以隐藏未编译的Mustache标签，直到实例准备完毕。
  3. 原理：利用 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页面加载闪烁的问题以及解决方案的更多相关文章

  1. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  2. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  3. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  4. Vue页面加载时，触发某个函数的方法

    需要在加载页面的时候调用生成验证码的click事件函数 解决方法如下,利用Vue中的mounted mounted:function(){ this.createcode();//需要触发的函数 } ...

  5. vue:绑定数据的vue页面加载会闪烁问题

    1:在挂在数据的容器加上属性 v-cloak 2:在css中添加如下代码 但有时候还是会不起作用,可能原因有两个 2.1:display属性被更高权限的display属性覆盖了,我们增加权限就好了 2 ...

  6. vue解决加载闪烁问题

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  7. Vue 页面加载闪现代码问题

    CSS中 [v-cloak] { display: none; } HTML中 <div v-cloak> {{ message }} </div> 显示代码主要是{{}}这个 ...

  8. vue 使用v-cloak让在页面加载时不显示{{}}花括号

    官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...

  9. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  10. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

随机推荐

  1. Crony 一个基于Go语言实现的分布式定时任务管理平台

    crony - 分布式定时任务管理平台 1. 基本介绍 1.1 项目背景 项目中存在许多定时任务,很多代码写法都是采取见缝插针式的写法或者直接丢到task服务里面写,存在以下问题 服务多实例时执行定时 ...

  2. 使用 Bytebase 管理 Rainbond 上的应用数据库

    在应用的发布过程中数据库的结构变更一直是最复杂也是风险最大的环节,而 Bytebase 可以对这一过程进行全生命周期的管理.在 Rainbond 中安装 Bytebase,轻松管理部署在 Rainbo ...

  3. SpringCloud Alibaba(三) - GateWay网关

    1.基本环境搭建 1.1 依赖 <!-- Gatway 网关会和springMvc冲突,不能添加web依赖 --> <dependency> <groupId>or ...

  4. 通过Shell脚本自动安装Hive&JDBC测试&提供CDH5网盘地址

    〇.参考地址 1.Linux下编写脚本自动安装hive https://blog.csdn.net/weixin_44911081/article/details/121227024?ops_requ ...

  5. PostgreSQL函数：查询包含时间分区字段的表，并更新dt分区为最新分区

    一.需求 1.背景 提出新需求后,需要在www环境下进行验收.故需要将www环境脚本每天正常调度 但由于客户库无法连接,ods数据无法每日取,且连不上客户库任务直接报错,不会跑ods之后的任务 故需要 ...

  6. 5V升压12.6V芯片电路图，三节锂电池充电

    三节3.7V的锂电池串联,11.1V和最大12.6V锂电池充电电路的解决方案.在应用中,一般使用低压5V,如USB口直接输入的给三串锂电池充电,还有是15V或者18V,20V输入降压给锂电池充电的两种 ...

  7. JavaScript：七大基础数据类型：大整数bigint

    因为数值number有表示范围,所以当我们需要精确表示更大的数字时,我们需要用到大整数bigint: 事实上,大整数可以精确表示任意长度的整数: 我们可以通过在整数的末尾添加字母n,来声明它是一个大整 ...

  8. C语言读写txt文件

    写入和读取txt文件 #include<stdio.h> #include<string.h> int main( int argc, char *argv[] ) { int ...

  9. 什么是RPC? （全面了解）

    一:RPC 1.什么是RPC? RPC 是指远程过程调用,也就是说两台服务器,A 和 B,一个应用部署在A 服务器上,想要调用B 服务器上应用提供的函数或方法,由于不在一个内存空间,不能直接调用,需要 ...

  10. JavaWeb项目编译前后的目录结构

    JavaWeb项目编译前后的目录结构 编译前 页面和视图都放在webapp目录下 编译后 webapps WEB-INF