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

今天开始学习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显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    关于两者的区别,官网是这样说的: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,v-show 简单得多--元素始终被编译并保留,只是简单地基于 CSS 切换. 一般来说,v-if 有更高的切换

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • 对vue v-if v-else-if v-else 的简单使用详解

    首先vue.js请注意 2.1.0版本以上方可使用v-else-if <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue.js"></script> </head> <body> <div id="box&q

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

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • 解决使用vue.js路由后失效的问题

    新学了vue.js中的路由 在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

  • 使用Vue.js实现数据的双向绑定

    目录 如何用Vue.js实现数据的双向绑定? 1. 理解双向绑定 2. 使用v-model指令 3. 使用自定义组件实现双向绑定 4. 数据劫持 5. 模板引擎 6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据.在本文中,我们将介绍如何用Vue.js实现数据的双向绑定. 1. 理解双向绑定 首先,我们需要了解双向绑定的原理.在Vue.js中

  • Vue.js 实现数据展示全部和收起功能

    如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示 首先我们的数据类型是这样的, tableData: [ { "comment": "", "lscm": [ { "count": "1268", "id": 1, "namech": "OGC WMTS", "nameen"

  • 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • Vue.js中Line第三方登录api的实现代码

    国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的! 按步骤来: 注册Line账号就不说了,虽然麻烦,这就自己去想办法了! demo 请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417081951162505 一:开发者平台配置 去Line 的开发者平台 新建一个App: https://developers.line.biz/en/ ​ ​ 顺便写好资料: ​ 动态演示: ​ 这要 用到的 就是2个: Chann

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

随机推荐