了解vue.js中的v-cloak指令

了解vue.js中的v-cloak指令

假设这样一种情景，当网络很慢时，网页还在加载Vue.js，导致Vue来不及渲染，这时候页面上就会显示出Vue的源码，这对于用户来说是一种很不好的体验，我们可以通过v-cloak来解决这样的问题，通过v-cloak绑定样式，这些样式会在Vue实例编译结束后，从绑定的HTML中移除。

1. 不添加v-cloak指令：

1.HTML代码：
<div id="app">
    {{context}}
</div>
2.JS代码：
<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互联网头部玩家钟爱的健身项目'
        }
    });
</script>

• 效果图：

2. 添加v-cloak指令

HTML代码：
<div id="app" v-cloak>
    {{context}}
</div>
JS代码：
<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互联网头部玩家钟爱的健身项目'
        }
    });
</script>
CSS代码：
[v-cloak]{
    display: none;
}

• 效果图：