解决使用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中数组对象的那些自带方法介绍
Mar 12 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
js实现筛选功能
Nov 24 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
WordPress自定义时间显示格式
2015/03/27 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JavaScript错误处理
2015/02/03 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python类super()及私有属性原理解析
2020/06/15 Python
解决pip install psycopg2出错问题
2020/07/09 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
师德师风个人反思
2014/04/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书