解决使用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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JS与C#编码解码
Dec 03 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
javaScript封装的各种写法
Aug 14 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
详解JS模块导入导出
Dec 20 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
探讨如何把session存入数据库
2013/06/07 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python实现学生管理系统
2018/01/11 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
为什么需要版本控制
2016/10/28 面试题
教育系统干部作风整顿心得体会
2014/09/09 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
客户答谢会致辞
2015/07/30 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis