Vue部分編譯不生效,解決Vue渲染時候會閃一下

0828自我總結

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>