如何解决Vue.js显示数据的时,页面闪现

下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。

今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。

第一步、加入一段css代码

<style type="text/css">
  [v-cloak] {
    display: none;
  }
</style>

第二步、在view上引用css模块

<p id="app" v-cloak>
  <h1>{{message}}</h1>
  <h1>{{name}}</h1>
</p>

注意，有的文章说，在具体数据部分加入v-cloak，但是这样太麻烦，每一个数据显示都要加，所以直接加载view大模块上，就能解决问题了。

第三步、js部分没有变化

<script type="text/javascript">
  var exeData = {
    message : "Hello World",
    name:"我是Vue"
  };

  new Vue({
    el : "#app",
    data : exeData
  })
</script>

下面贴上完整代码：

<meta charset="UTF-8">
<title>Vue.js Demo</title>
<style type="text/css">
  [v-cloak] {
    display: none;
  }
</style>


  <!--这是View -->
  <p id="app" v-cloak="">
    </p><h1>{{message}}</h1>
    <h1>{{name}}</h1>
  <p></p>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  //模型数据Model
  var exeData = {
    message : "Hello World",
    name:"我是Vue"
  };

  //View实例，也就是View-Model(VM)
  new Vue({
    el : "#app",
    data : exeData
  })
</script>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Webpack中解决热部署检测不到文件变化的问题

在Webpack dev server中出现热加载失败的问题

在webpack-dev-server中实现远程访问配置方法

Atas ialah kandungan terperinci 如何解决Vue.js显示数据的时,页面闪现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!