Vue在页面初次渲染时出现一闪而过的模板变量问题

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{{ liveInfo.liveName }}等

解决办法：

1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题（推荐）

具体实现：

<div class="active_txt" v-cloak v-if="liveInfo.liveTextImgs!=''">
      {{liveInfo.liveTextImgs}}
</div>

CSS中添加：

[v-cloak]{ display: none; }

2、可以在需要编译的元素前后加上<template></template>

关于<template>详解

http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

3、通过切换需要编译元素的display属性，最开始设为none，请求完数据后设为block

4、VUE前置加载

5、使用组件，模板都写在组件中，html 文件中仅插入组件标签

6、用个“loading”的遮罩层，请求数据成功后再显示

但是有的时候会不起作用，可能的原因有二：

一，v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {
    display: none !important;
}

这里使用了简单粗暴的方法加了个!important，有更好的方法欢迎留言。

二，样式放在了@import引入的css文件中（传统的开发方式）
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中