Vue 页面加载会出现闪烁

v-cloak

用法：

这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

 

示例：

 css:

 

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

 

 

HTML

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

 

不会显示，直到编译结束。

大概是这样

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>VUE</title>
  <script src="../js/jquery-2.1.4.min.js"></script>
  <script src="../js/vue.js"></script>
 <style>
   [v-cloak] {
     display:none !important;
   }
 </style>
</head>
<body>
<div id="app" v-cloak>
    {{message}}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue'
    },
    methods: {
      changeValue : function(){
         // methods
      }
    }
  })
</script>

</body>
</html>
View Code

 

posted on 2017-09-13 17:22  Mc525  阅读(163)  评论(0)    收藏  举报

导航