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

2016-07-05 14:06:52 +08:00
 Plumes

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

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

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

2822 次点击
所在节点    Vue.js
10 条回复
Troevil
2016-07-05 14:21:38 +08:00
sox
2016-07-05 14:45:42 +08:00
这和设备没关系。。
sox
2016-07-05 14:45:42 +08:00
这和设备没关系。。
subpo
2016-07-05 14:48:06 +08:00
[v-cloak] {
display: none;
}
Plumes
2016-07-05 14:59:51 +08:00
@Troevil @subpo 试了一下,效果好像不是很理想
adeweb
2016-07-05 15:03:27 +08:00
<h1 v-text='title'></h1>
为啥不这么写?
Plumes
2016-07-05 15:04:28 +08:00
@Troevil @subpo 尝试在使用模版的父级 div 上使用 v-cloak ,就可以了
adeweb
2016-07-05 15:06:02 +08:00
另外区块级别的你可以默认给个隐藏,然后 :class="{'z-show':dataLoaded}", dataLoaded 在你完成数据加载后给它赋值 true 就行。
Plumes
2016-07-05 15:07:22 +08:00
@adeweb 不太喜欢这种数据和属性混在一起的写法
njstt
2016-07-05 15:18:01 +08:00
可以与 webpack 混合使用 http://vuejs.org.cn/guide/application.html
adeweb
2016-07-05 15:37:26 +08:00
@Plumes 嗯,我反倒不喜欢{{}} :)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/290385

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX