2.6 延迟显示，等待vue.js 加载完后后进行渲染显示

程序员文章站 2022-05-17 10:05:55

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script>
        //在vue解析前，div中有一个属性cloak
        //在vue解析之后，div中没有一个属性v-cloak
        setTimeout(() => {
            const vm = new Vue({
                el: "#app",
                data: {
                    message: "你好啊"
                }
            })
        }, 3000);
    </script>
</body>
</html>

这里在 style 中使用了属性选择器[]。如果对属性选择器不熟悉的同学，可以复习一下 CSS 中的选择器。属性选择器就是选择 DOM 元素中相关的属性，然后进行样式设置。这里当v-cloak 属性存在是，即 vue 文件没有被下载下来，没有进行挂载时，这个属性会一直保留。直到vue编译模板后，才会将该属性删除，此时css选择器不会起作用，然后就正常显示内容了。

为了看到这个效果，可以在一开始的阶段，不进行加载vue.js 文件，这样浏览器会一直白屏。

上一篇： CorelDRAW简单绘制可爱的卡通圆表

下一篇：向前任女朋友说的话