zoukankan      html  css  js  c++  java
  • vue 解析时表达式闪烁的问题

    现象:

      在使用 vuejs、angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁。

    原因:

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

    解决办法:

      vuejs、angularjs中为我们提供了v-cloak、ng-cloak来实现防止闪烁的方案。

    用法(vue 为例):

    index.css :

    [v-cloak] {
      display: none;
    } 
    

    index.vue :

    <div v-cloak>
        {{ message }}
    </div> 
    

      直到 表达式编译完成,div 才会显示  

    原理:

      带有 v-clock 的的元素设置为 display:none,隐藏掉,在等到 vue 解析到带有 v-clock 的节点时候,会把 attribute 和 class 同时remove掉,这样就可以实现防止节点的闪烁。  

    注意:

      在实际使用中,v-for 循环数据时可能会遇到不起作用的现象,要把 v-clock 放在跟 v-for 同一个标签上,仅供参考。

  • 相关阅读:
    new、delete和malloc、free
    重写与重载
    面向对象三个基本特征
    Js零散知识点笔记
    ES6 笔记
    js 单例模式笔记
    关于闭包的见解
    DOM笔记
    浏览器差异
    JS高级程序设计 笔记
  • 原文地址:https://www.cnblogs.com/zhangym118/p/10986253.html
Copyright © 2011-2022 走看看