(七)vue：v-cloak用法

一.指令说明

首先我们看下官方的解释：

文档中写的很清晰，下面我们会举例说明。

二.举例讲解

直接看下面的代码：

<div id="app">
        <h1>{{message}}</h1>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:"hello world"
        }
    });
</script>

上面代码，渲染结果很清楚，浏览器会直接显示hello world:

让我们深入研究下浏览器解析的过程，首先浏览器先加载了div字段，然后在加载我们的脚本script。那么在脚本编译完成之前的一个短暂的时间内，页面上应该是 {{message}}，只不过这个时间太短了，所以我们观察不到这一个现象，所以我们把代码稍作修改：

    <script>
        // var app = new Vue({
        //     el:'#app',
        //     data:{
        //         message:"hello world"
        //     }
        // });
        setTimeout(function(){
            new Vue({
            el:'#app',
            data:{
                message:"hello world"
            }
        })
        }, 2000);
    </script>

然后用浏览器打开，可以观察到首先显示 {{message}}，2秒之后变成hello world:

所以为了避免这个现象，应该怎么处理，这个时候就需要我们的主角 v-cloak出场了，将html改为：

<h1 v-cloak>{{message}}</h1>

打开浏览器控制台，查看dom节点的变化，在vue编译完成之前，节点上有我们添加的v-cloak属性，等vue编译完成之后，v-cloak实例消失：


我们可以利用这一个特点，为v-cloak添加一个style：

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

大家可能已经知道最后结果了，因为我们为v-cloak添加了css，所以在vue实例编译完成之前 h1节点将不会显示，等vue实例编译完成 h1节点才会显示。所以我们不会再看到 {{message}}。

参考原文地址