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


Posted in Javascript onFebruary 11, 2018

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

第一步、加入一段css代码

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

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

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

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

第三步、js部分没有变化

<script type="text/javascript">   
  var exeData = { 
    message : "Hello World", 
    name:"我是Vue" 
  }; 
 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script>

下面贴上完整代码:

<!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>

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

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
List the UTC Time on a Computer
Jun 11 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
element中的$confirm的使用
Apr 26 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
Express进阶之log4js实用入门指南
Feb 10 #Javascript
Vue完整项目构建(进阶篇)
Feb 10 #Javascript
JS简单获得节点元素的方法示例
Feb 10 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python写一个随机点名软件的实例
2019/11/28 Python
python轮询机制控制led实例
2020/05/03 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
过滤器的用法
2013/10/08 面试题
名企HR怎样看待求职信
2014/02/23 职场文书
给校长的建议书600字
2014/05/15 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
民主生活会发言材料
2014/10/20 职场文书
python某漫画app逆向
2021/03/31 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
Java对文件的读写操作方法
2022/04/29 Java/Android