还是要多看文档啊,记VUE页面加载堆叠问题

使用VUE有几个月，每次都是WOW的嘴型在写代码，作为后端兼顾前端的原后端程序员，用惯了jQuery系再转战VUE，个中舒爽是难以言表的。

但是一直有个问题有所困扰，就是多屏滑动的单页应用，在页面加载的时候回出现堆叠问题，后来使用 display:none 来隐藏后页，使用 v-show="loadVue" 来解决。

一直也纳闷,为啥VUE会留下这么个普遍的问题存在。

直到昨天！直到昨天！直到昨天！我居然才试着扫了一眼文档，发现VUE已经提供了解决方案： v-cloak 。使用该命令放到元素上，然后配合CSS：

1
2
3

[v-cloak] {
display:none;
}

解决思路和我上面的是一致的,但这个更简洁而且是官方提供,不用担心后续的一些额外问题。还是要多看文档，多用搜索啊，自己写个歪轮子总不如官方的简洁方便。

下面是VUE文档对该指令的描述:

• 不需要指令

• 用法

  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

• 示例

1
2
3

[v-cloak] {
display:none;
}

1
2
3

<div v-cloak>
{{ message }}
div>