话不多说,先上图
背景:
本人在做图书 demo 的一个项目的时候,发现加载详情页的时候,出现了一个大大的红色 NaN,等到数据返回后才会变为正常值,像这样:
相信很多童鞋就会说用 v-if/v-show 等到数据返回来之后在展示。
没错,笔者之前就是这么干的,但是还是会出现数据加载回来之前出现局部空白。那么有没有办法可以改善呢?下面介绍下笔者的解决办法,方法略显粗糙,请笑纳!
记得之前老大在群里说研究一下饿了吗的这个技术:
所以给我这个方案带来了灵感,不妨在在数据加载之前预先渲染用一个设定好样式的元素试试呢。
vue 有没有什么可以直接操作 dom 的?我一下想到了 vue 的自定义指令。
在数据返回之前,先加载一个预先设定的样式(pre)元素,等到数据返回之后再替换真实(real)元素。对就是这么简单!
1. 我们先定义一个样式接口
2. 定义模板
3. 我们把模板插到我们挂载的元素上
- el.innerhtml = template;
4. 数据返回后替换模板(手法比较粗糙 QAQ)
到这里一切看起来都是很美好,但是我们忽略了一个问题,如果你的 style 是这样的
并且你想要 render 一个 html,像这样
我们再试一下
咦?!我们的样式哪去了? 检查元素看看
原来我们丢失一个属性,如有不懂可参考本人写的《CSS 模块化》一文。
接下来我们继续
5. 获取属性
6. 重新编译模板,添加属性
7. 最后一步,添加监听
8. 挂载自定义指令在 vue 上
用法 1
用法 2
时间原因,写的比较糙,还有很多需要改进的地方,希望观众老爷多多提些建议哈
来源: http://www.jianshu.com/p/c917c933499c