【1118 | Day61】Vue部分编译不生效,解决Vue渲染时候会闪一下（斗篷指令）

一、Vue编译不生效

在标签里添加v-pre

<script src="vue.js"></script>
<div>
    <p v-pre>{{msg}}</p>                  //网页中显示{{msg}}
    <p >{{msg}}</p>                       //网页中显示66
</div>

<script>
    new Vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

二、解决Vue渲染时候会闪一下

方法一:

将导入vue放在需要用vue编译的位置前面
<script src="vue.js"></script>             //导入放前面
<div>
    <p >{{msg}}</p>                       //网页中显示66
</div>

<script>
    new Vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

方法二:

利用v-cloak在加载vue完成后他会消失,专业术语叫斗篷

<style>
    [v-cloak]{display:none}
<</style>   
<div>
    <p v-cloak>{{msg}}</p>                  
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>