这篇文章主要介绍了小项目中怎么防止Vue的闪现画面效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一句话总结

HTML: 元素加上v-cloak

CSS: [v-cloak]{display: none}

过程

页面刚加载的时候胡子语显示出来。

v-cloak是VueJS小型项目中提升用户体验简单且重要的方法。

用法

HTML中在你需要组织闪现的标签上加上v-cloak

<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

CSS中给v-cloak设定样式,这个样式是只有应用的样式。

[v-cloak]{  
 display: none;  
}

原理

我没读完源码,但是v-cloak的原理我大概理解一点:

首先是CSS选择器,用[target]选择的是“带有 target 属性所有元素。”。可以点这里复习选择器。

那么[v-cloak]选择出来的就是所有带有v-cloak属性的元素了。

实例初始化完成之后,VueJS中会把Vue中特有的attribute去掉。在实例初始化完成之前,上面写的main的HTML代码实际是这样的:

<main id="main" class="row" v-cloak="">

然后加上CSS,就把所有带有v-cloak的元素都display: block了。

其实不止是v-cloak,你可以用v-if来试试,CSS里使用[v-if]{display:none},效果看起来是一样的。和v-cloak一样,v-if也是在实例编译完之后去掉。

源码

然后我刚才去读了一下源码,大概是这一段,感兴趣的大佬可以去搜搜读读理解理解。

if (isRealElement) {  
 // mounting to a real element  
 // check if this is server-rendered content and if we can perform  
 // a successful hydration.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 hydrating = true;  
 }  
}

到此这篇关于小项目中怎么防止Vue的闪现画面效果的文章就介绍到这了,更多相关小项目vue闪现画面内容请搜索爱安网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持爱安网!

最新资讯
特斯拉召回9500辆Model X和Model Y汽车

特斯拉召回9500辆Mode

特斯拉针对其车辆发起了两起召回,共有大约9500辆汽车受
消息称IBM将在欧洲裁员10000人 英法德是重灾区

消息称IBM将在欧洲裁

据报道,IBM正计划在欧洲裁员约1万人,以降低其增长缓慢的
阿里健康:截至2020年9月30日六个月营收71.62亿元

阿里健康:截至2020年9

阿里健康发布公告,截至2020年9月30日六个月营收71.62亿
刘晓春:我国数字货币发行应纳入到整个人民币发行统一规划中

刘晓春:我国数字货币发

刘晓春:我国数字货币发行应纳入到整个人民币发行统一规
马斯克与何小鹏:一边互喷,一边圈占资本市场

马斯克与何小鹏:一边互

马斯克与何小鹏,作为中美造车新势力的代表人物,在社交媒
收入、利润和用户,藏在小米财报里的平衡术

收入、利润和用户,藏在

已经十岁的小米显然懂得如何在短期业绩和未来成长之间
最新文章
网页简单布局之结构与表现原则分享

网页简单布局之结构与

一般来说html结构 css表现 javascrip行为,网页布局要考
隐藏 Web 中的元素方法及优缺点教程详解

隐藏 Web 中的元素方

这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

这篇文章主要介绍了白话分析自适应跟响应式的区别详解
div与div之间有空隙的解决方法

div与div之间有空隙的

今天在制作页面的时候发现两个div之间有空隙导致两个
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解