Vue.js页面渲染出现{{message}}问题处理方法

Posted 2021-05-25 smileNicky

Vue.js页面渲染出现{{message}}问题处理方法

业务场景：最近在做JSP项目，然后又引入vue.js做前端，然后启动页面时候出现{{message}}占位符显示出来，然后再加载页面，有点闪屏问题，体验不是很好，这种情况有可能是网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染

方法①：出现这种，可以检查一下样式文件是否放在文件最前面，js文件要放在最后面，这也是一种规范。或者也可以使用link引用

 <style>
  @import "${css}/project/index.css";
 </style>

方法②：通过网上资料找到vue.js中的v-cloak命令，v-cloak用法：

这个指令保持在元素上直到关联实例结束编译。和 css 规则（如[v-cloak] { display: none }）一起用，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完成

css文件：

!important作用是提高指定CSS样式规则的应用优先权

<style>
   @import "${css}/project/index.css";
    [v-cloak]{
        display: none;!important;
    }
</style>

html文件：

<div id="app" v-cloak>
  <div class="container"></div>
</div>

ps：这种方法可以在一些小型项目使用，对于大项工程化项目，有webpack、vue-router的项目，就不用这种方法，当然，本文是后端开发写的，非专业前端开发写，仅供参考，有问题欢迎评论指出