v-cloak消除页面闪动

v-cloak消除页面闪动

实时更新时间的代码：

<div id="app"><h1>Time: {{ date|formatDate }}</h1></div>
    <script>
        var padDate = function (value) {
            return value < 10 ? '0'+value : value;
        }
        var app = new Vue({
            el: '#app',
            data: {
                date: new Date()
            },
            mounted: function () {
                var _this = this;
                this.timer = setInterval(function () {
                    _this.date = new Date();
                }, 1000);
            },
            beforeDestory: function () {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            },
            filters: {
                formatDate: function (value) {
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
                }
            }
        });

由于加载页面后Vue.js往往还没加载完，因此可能导致页面一开始会出现如下的字样（即页面没来得及被渲染完成）：

随后Vue.js加载完成，上图被渲染完成而跳闪为下图的日期：

可以在div属性中加上v-cloak并设置样式：

<style>
        [v-cloak] {
            display: none;
        }
</style>
<div id="app" v-cloak><h1>Time: {{ date|formatDate }}</h1></div>

如此设置，在未加载Vue.js时凡是含有v-cloak属性的元素是不可见的。
Vue.js加载完成后v-cloak属性会被自动移除，元素也就显示出来了（此时已经完成了渲染）。