http://blog.csdn.net/fengjingyu168/article/details/72915468

VUE绑定数据闪现问题

问题描述如下:

1、在HTML中使用Vue为div绑定数据,方式如下:

	<div>{{area_nums}}</div>

2、在Vue实例中声明变量并给初始值,在页面加载时请求后台数据,重新赋值

let app = new Vue({
el: '#app',
data: {
area_nums: 0,
},
    created: function () {
// 此处请求数据,为area_nums赋值
},
})

3、在页面渲染时,短暂出现{{area_nums}},后加载数据,请求后台数据需要时间,但为何不是直接显示初始值0,
而加载成{{area_nums}}呢?

原因:
由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,
所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。(别处借来的)

解决方法:
1、使用 v-cloak
   标签中直接使用v-cloak ,
   样式中添加
	[v-cloak] {
display: none;
}

这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。

具体见下面出处链接:http://www.cnblogs.com/slly/p/5884656.html

http://www.sunzhongwei.com/hide-vuejs-variable-with-v-cloak-when-page-loading

vue绑定数据之前 会看到源代码的更多相关文章

  1. vue:绑定数据的vue页面加载会闪烁问题

    1:在挂在数据的容器加上属性 v-cloak 2:在css中添加如下代码 但有时候还是会不起作用,可能原因有两个 2.1:display属性被更高权限的display属性覆盖了,我们增加权限就好了 2 ...

  2. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  3. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  4. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  5. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  6. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  7. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  8. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  9. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

随机推荐

  1. mysql闪回工具--binlog2sql实践

    DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法费时费力,甚至需要停机维护 ...

  2. asList和ArrayList不得不说的故事

    目录 简介 创建ArrayList UnsupportedOperationException asList 转换 总结 asList和ArrayList不得不说的故事 简介 提到集合类,ArrayL ...

  3. Algs4-2.1.17动画-选择排序

    2.1.17动画.修改插入排序和选择排序的代码,使之将数组内容绘制成正文中所示的棒状图.在每一轮排序后重绘图片来产生动画效果,并以一张"有序"的图片作为结束,即所有圆棒均已按照高度 ...

  4. 如何设计scalable 的系统 (转载)

    Design a Scalable System Design a system that scales to millions of users (AWS based) Step 1: Outlin ...

  5. Geomesa-Hbase集群部署

    本文记录一下Geomesa-Hbase集群部署,在单机部署的基础上 https://www.cnblogs.com/help-silence/p/12817447.html 1.搭建集群 https: ...

  6. Recursion and System Stack

    递归是计算机科学中一个非常重要的概念,对于斐波那契那种比较简单的递归,分析起来比较容易,但是由于二叉树涉及指针操作,所以模仿下遍历过程中系统栈的情况. 以二叉树中序遍历为例演示: //二叉树定义 st ...

  7. C++类学习(2)

    Ⅰ:类概念 一:类的构成 class 类名 { public: 公有数据成员和成员函数:类的接口 protected: 保护数据成员和成员函数: private: 私有数据成员和成员函数: }://注 ...

  8. centos下配置LNMP环境(源码安装)

    准备工作,安装依赖库 yum -y install gcc automake autoconf libtool make gcc-c++ glibc libxslt-devel libjpeg lib ...

  9. 区间dp C - Two Rabbits

    C - Two Rabbits 这个题目的意思是,n块石头围一圈.一只兔子顺时针,一只兔子逆时针(限制在一圈的范围内). 这个题目我觉得还比较难,不太好想,不过后来lj大佬给了我一点点提示,因为是需要 ...

  10. NIO(一) Java NIO 概述

    转:http://ifeve.com/overview/ Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和 ...