Vue.js 中的 v-cloak 指令

骑猪看日落 2023-07-23 04:56 7阅读 0赞

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

html：

<div id="app">
        {
       {context}}
    </div>

js：

效果：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LWNjMGNkYTFkOTgwYjk1ODYuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjg4L2Zvcm1hdC93ZWJw][]

我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩\_∩)O~

js 不变，在 div 中加入 v-cloak 指令。

html：

<div id="app" v-cloak>
        {
       {context}}
    </div>

css：

[v-cloak]{
        display: none;
    }

使用 v-cloak 指令之后的效果（[demo][]）：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTVlYmU1YmI0NTJhMjUyOTguZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjg4L2Zvcm1hdC93ZWJw][]

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LWNjMGNkYTFkOTgwYjk1ODYuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjg4L2Zvcm1hdC93ZWJw]: /images/20230528/d00ead9a536243db9a4bc292b99fd28d.png
[demo]: https://jsfiddle.net/deniro/joafmeph/
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTVlYmU1YmI0NTJhMjUyOTguZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjg4L2Zvcm1hdC93ZWJw]: /images/20230528/9ae24b0bae4b4bb58b0c24388608ae0b.png