vue初始化页面闪动问题

这是因为在vue初始化之前，由于div不归vue管，所以我们写的代码在还没有解析的情况下，容易出现花屏的现象，类似于{ {message}}的字样，虽然这个时间很短暂，但是需要解决。

首先：

css中添加 v-cloak 这是官方文档 https://cn.vuejs.org/v2/api/#v-cloak

[v-cloak] {
    display: none;
}

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

如果没有彻底解决，需要在根元素上加：这里默认vue实例绑定到类名为app的div上。

<div class="app" style="display: none;" :style="{display: 'block'}">
	{
   
   {message}}
</div>

这样应该就可以了。

原理：

vue在渲染之前，style="display: none;"让页面不显示

vue渲染完成了，:style="display: block;"让页面显示