Plumes
V2EX  ›  Vue.js

Vue.js 在低端设备上应用时的用户体验问题

  •  
  •   Plumes · Jul 5, 2016 · 3462 views
    This topic created in 3630 days ago, the information mentioned may be changed or developed.

    在使用一些比较低端的设备访问使用了 Vue.js 的页面时,会出现模版代码一闪而过,部分用户会认为是乱码 比如模版里用到了

    <h1>{{ title }}</h1>
    

    用户在页面加载时就会看到一个特别大的 {{ title }} 这个问题有没有什么好的方法可以避免?

    10 replies    2016-07-05 15:37:26 +08:00
    Troevil
        1
    Troevil  
       Jul 5, 2016   ❤️ 1
    sox
        2
    sox  
       Jul 5, 2016
    这和设备没关系。。
    sox
        3
    sox  
       Jul 5, 2016
    这和设备没关系。。
    subpo
        4
    subpo  
       Jul 5, 2016   ❤️ 1
    [v-cloak] {
    display: none;
    }
    Plumes
        5
    Plumes  
    OP
       Jul 5, 2016
    @Troevil @subpo 试了一下,效果好像不是很理想
    adeweb
        6
    adeweb  
       Jul 5, 2016
    <h1 v-text='title'></h1>
    为啥不这么写?
    Plumes
        7
    Plumes  
    OP
       Jul 5, 2016
    @Troevil @subpo 尝试在使用模版的父级 div 上使用 v-cloak ,就可以了
    adeweb
        8
    adeweb  
       Jul 5, 2016
    另外区块级别的你可以默认给个隐藏,然后 :class="{'z-show':dataLoaded}", dataLoaded 在你完成数据加载后给它赋值 true 就行。
    Plumes
        9
    Plumes  
    OP
       Jul 5, 2016
    @adeweb 不太喜欢这种数据和属性混在一起的写法
    njstt
        10
    njstt  
       Jul 5, 2016
    可以与 webpack 混合使用 http://vuejs.org.cn/guide/application.html
    adeweb
        11
    adeweb  
       Jul 5, 2016
    @Plumes 嗯,我反倒不喜欢{{}} :)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2769 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 11:09 · PVG 19:09 · LAX 04:09 · JFK 07:09
    ♥ Do have faith in what you're doing.