• 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 同一个标签上,仅供参考。

  • 相关阅读:
    C# 关键字 default
    nopCommerce_3.00-Nop.Core.Caching
    汉字转拼音
    ASP.NET MVC性能调试工具-MvcMiniProfiler
    开源项目
    UVA 11374 Airport Express 最短路
    UVA 10319 Manhattan 2-sat
    UVA 1357 Cells
    UVA 610 Street Directions 双连通分量
    UVA 11504 Dominos 强连通分量
  • 原文地址:https://www.cnblogs.com/zhangym118/p/10986253.html
Copyright © 2020-2023  润新知