解决使用Vue.js显示数据的时,页面闪现原始代码的问题

内容摘要
这篇文章主要为大家详细介绍了解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有一定的参考价值，可以用来参考一下。
文章正文

这篇文章主要为大家详细介绍了解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

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

 

第一步、加入一段css代码

 

代码如下：

1
2
3
4
5
6
<code>
<style type="text/css">
  [v-cloak] {
    display: none;
  }
</style> </code>

 

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

 

代码如下：

1
2
3
4
5
<code>
<div id="app" v-cloak>
  <h1>{{message}}</h1>
  <h1>{{name}}</h1>
</div> </code>

 

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

 

 

第三步、js部分没有变化

 

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<code>
<script type="text/javascript">  
  var exeData = {
    message : "Hello World",
    name:"我是Vue"
  };
  
  new Vue({
    el : "#app",
    data : exeData
  })
</script> </code>

 

下面贴上完整代码：

 

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Demo</title>
<style type="text/css">
  [v-cloak] {
    display: none;
  }
</style>
</head>
<body>
  <!--这是View -->
  <div id="app" v-cloak>
    <h1>{{message}}</h1>
    <h1>{{name}}</h1>
  </div>
</body>
<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>
</html> </code>

以上这篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持php教程。

注：关于解决使用Vue.js显示数据的时,页面闪现原始代码的问题的内容就先介绍到这里，更多相关文章的可以留意
代码注释
上一篇Laravel框架扩展函数、扩展自定义类的解决办法下一篇解决vue2中使用axios http请求出现的问题

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！