解决使用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 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
bootstrap table小案例
Oct 21 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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 图片上传实现代码 带详细注释
2010/04/29 PHP
CSS常用网站布局实例
2008/04/03 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python批量转换文件编码格式
2015/05/17 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
详解Python3定时器任务代码
2019/09/23 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python爬虫可以爬什么
2020/06/16 Python
python中有帮助函数吗
2020/06/19 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
淘宝店铺营销方案
2014/02/13 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
中国好声音广告词
2014/03/18 职场文书
党员身份证明材料
2015/06/19 职场文书
学校教代会开幕词
2016/03/04 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB