这篇文章主要介绍了小项目中怎么防止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闪现画面内容请搜索爱安网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持爱安网!

最新资讯
百度投资智慧树 引入高校资源丰富知识类产品内容

百度投资智慧树 引入

百度于日前完成对智慧树的投资。
是真还了!罗永浩始于2018年年底的6个亿债务已还清4个亿(图)

是真还了!罗永浩始于20

今晚的脱口秀大会总决赛中,@罗永浩 表示其始于2018年年
井贤栋:未来新金融是以区块链建设的价值互联网(全文)

井贤栋:未来新金融是以

井贤栋称,过去的金融风控是防范人,靠抵押和担保穿上防弹
英雄联盟能提高你的视觉选择性注意力

英雄联盟能提高你的视

类似魔兽世界、帝国时代和全面战争等即时战略游戏拥有
如何加快5G用户发展速度?这里有一个全球近3亿用户的共同选择…

如何加快5G用户发展速

2020年对于5G商用规模的拓展成了运营商工作的重点。对
WeWork中国获2亿美元融资 挚信资本姜跃平任代理CEO

WeWork中国获2亿美元

WeWork宣布,WeWork中国获挚信资本2亿美元追加投资,挚信
最新文章
网页简单布局之结构与表现原则分享

网页简单布局之结构与

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

隐藏 Web 中的元素方

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

白话分析自适应跟响应

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

div与div之间有空隙的

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

推荐一款酷炫闪烁的告

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

移动端开发1px线的理

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