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

最新推荐文章于 2023-07-21 21:53:47 发布

abcque

最新推荐文章于 2023-07-21 21:53:47 发布

阅读量883

点赞数

分类专栏： Vue 2.x Tutorial 文章标签： vue.js css html5

本文链接：https://blog.csdn.net/zhoulinshijie/article/details/120281260

版权

Vue 2.x Tutorial 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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 文件，这样浏览器会一直白屏。

abcque

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.6 延迟显示，等待vue.js 加载完后后进行渲染显示

<!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; .
复制链接

扫一扫