基本指令v-cloak

最新推荐文章于 2023-08-21 08:11:02 发布

闲人不梦卿

最新推荐文章于 2023-08-21 08:11:02 发布

阅读量421

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/108046548

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

基本指令v-cloak

v-cloak 它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除，经常和 css 的 display: none；配合使用。
当网速较慢、 Vue.js 文件还没加载完时，在页面上会显示｛ { message } ｝的字样，直到 Vue 创建实例、编译模板时， DOM 才会被替换，所以这个过程屏幕是有闪动的
所以当没有加载完成时需要一个遮罩，而v-cloak 通过css display: none；配合使用可以实现遮罩功能，并且根据v-cloak定义，它会在Vue实例结束编译时从绑定的HTML元素上移除，这样又不会一直遮罩，满足要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
         [v-cloak]{
             display: none;
         }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>
            {{message}}

        </div>
    </div>
    <script src="vue.js">

    </script>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{message:"123"}
            }
        )
    
    </script>
    <!-- v-cloak 它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除， 经常和 css 的 display: none；配合使用。
         当网速较慢、 Vue.js 文件还没 加载完时，在页面上会显示｛ { message } ｝的字样，直到 Vue 创建实例、编译模板时， DOM 才会被 替换，所以这个过程屏幕是有闪动的
         所以当没有加载完成时需要一个遮罩，而v-cloak 通过css display: none；配合使用可以实现遮罩功能，并且根据v-cloak定义，它会在Vue实例结束编译时从绑定的HTML元素上移除，这样又不会一直遮罩，满足要求
        -->
</body>
</html>