发布:admin2026-06-19 17:22:55 8630条浏览分类:星火论坛
一、原因:
问题:当我们打开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
}
[v-cloak]{
display: none;
}
{{msg}}
/*
问题: 当我们打开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);