问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{user }}等

解决办法:

1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题(推荐)
具体实现:

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

CSS中添加:

[v-cloak] {
	display: none;
}

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

关于详解

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文件里或者内联样式中