v-clock

先看以下这段代码

<ul v-for="item in obj">

    <li>{{ obj.name }}</li>

</ul>

那么,当我们使用vue从后台读取的数据时或者是刷新页面的时候因为响应问题可能会闪现一下{{obj.name}} 这个vue.js模板变量,这样给用户带来了不好的体验,这时候v-cloak 就要派上用场了

v-cloak: 防止页面加载时出现 vuejs 的变量名

方法:在 html 中的加载点加上 v-cloak

<ul v-cloak v-for="item in obj">

     <li>{{ obj.name }}</li>

</ul>

然后在css中添加

[v-cloak] {

     display: none;

}

解释:包含 v-cloak 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。

那么问题又来了:在实际项目中,我们一般都是通过 @import 来加载 css 文件

@import "style.css"

在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak] 写在 @import 加载的 css 文件中,就会导致页面仍旧闪烁。

解决办法:将 [v-cloak] 写在 link 引入的 css 中,或者写一个内联 css 样式。

在一般情况下,v - c l o a k是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如项目的HTML结构只有个空的d i v元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要v - c l o a k o

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值