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

更新日期: 2018-12-11 阅读次数: 36117 分类: VueJS

使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变量名。

案发现场的 HTML 代码

<ul v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

页面加载时,会闪现

{{ item.name }}

Google 了一下,发现 vuejs 内置的 directive v-cloak 可以解决这个问题。非常简单

HTML 修改成

<ul v-cloak v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

CSS 中添加

[v-cloak] {
  display: none;
}

搞定!

但是原理是什么呢?

这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。

cloak 斗篷

在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。问题来了,怎么才算是 ready 呢?这就需要了解 vuejs instance 的生命周期了。抽时间整理一下。

谈笑风生

Anran

三年前你还在教我用 ngCloak 

大象腿

三年后我已经忘记了 ngCloak ...

魅阳

我是来看评论的

hades

效果不明显

xufang

vue怎么获取经纬度的 ,有没有源码贡献下大佬

爱评论不评论

近期节日

2019年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日