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

更新日期: 2018-12-11 阅读次数: 34403 分类: 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年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
2019年05月01日 国际劳动节
2019年05月04日 五四青年节
2019年05月06日 立夏
2019年05月08日 世界红十字日
2019年05月08日 世界微笑日
2019年05月12日 国际护士节
2019年05月12日 母亲节
2019年05月12日 佛诞
2019年05月15日 国际家庭日
2019年05月17日 世界电信日
查看更多节日