V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Plumes
V2EX  ›  Vue.js

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

  •  
  •   Plumes · 2016-07-05 14:06:52 +08:00 · 2819 次点击
    这是一个创建于 3055 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    10 条回复    2016-07-05 15:37:26 +08:00
    Troevil
        1
    Troevil  
       2016-07-05 14:21:38 +08:00   ❤️ 1
    sox
        2
    sox  
       2016-07-05 14:45:42 +08:00
    这和设备没关系。。
    sox
        3
    sox  
       2016-07-05 14:45:42 +08:00
    这和设备没关系。。
    subpo
        4
    subpo  
       2016-07-05 14:48:06 +08:00   ❤️ 1
    [v-cloak] {
    display: none;
    }
    Plumes
        5
    Plumes  
    OP
       2016-07-05 14:59:51 +08:00
    @Troevil @subpo 试了一下,效果好像不是很理想
    adeweb
        6
    adeweb  
       2016-07-05 15:03:27 +08:00
    <h1 v-text='title'></h1>
    为啥不这么写?
    Plumes
        7
    Plumes  
    OP
       2016-07-05 15:04:28 +08:00
    @Troevil @subpo 尝试在使用模版的父级 div 上使用 v-cloak ,就可以了
    adeweb
        8
    adeweb  
       2016-07-05 15:06:02 +08:00
    另外区块级别的你可以默认给个隐藏,然后 :class="{'z-show':dataLoaded}", dataLoaded 在你完成数据加载后给它赋值 true 就行。
    Plumes
        9
    Plumes  
    OP
       2016-07-05 15:07:22 +08:00
    @adeweb 不太喜欢这种数据和属性混在一起的写法
    njstt
        10
    njstt  
       2016-07-05 15:18:01 +08:00
    可以与 webpack 混合使用 http://vuejs.org.cn/guide/application.html
    adeweb
        11
    adeweb  
       2016-07-05 15:37:26 +08:00
    @Plumes 嗯,我反倒不喜欢{{}} :)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2900 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:35 · PVG 11:35 · LAX 19:35 · JFK 22:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.