vue指令实现墓碑元素

话不多说，先上图

demo

背景：
本人在做图书demo的一个项目的时候，发现加载详情页的时候，出现了一个大大的红色NaN，等到数据返回后才会变为正常值，像这样：

大大的NaN

怎么解决？

相信很多童鞋就会说用 v-if/v-show 等到数据返回来之后在展示。
没错，笔者之前就是这么干的，但是还是会出现数据加载回来之前出现局部空白。那么有没有办法可以改善呢？下面介绍下笔者的解决办法，方法略显粗糙，请笑纳！

解决灵感

记得之前老大在群里说研究一下饿了吗的这个技术：

饿了吗

所以给我这个方案带来了灵感，不妨在在数据加载之前预先渲染用一个设定好样式的元素试试呢。

说干就干

用啥做？

vue有没有什么可以直接操作dom的？我一下想到了vue的自定义指令。

思路

在数据返回之前，先加载一个预先设定的样式（pre）元素，等到数据返回之后再替换真实（real）元素。对就是这么简单！

代码实现

1.我们先定义一个样式接口

样式定义

2.定义模板

模板

3.我们把模板插到我们挂载的元素上

el.innerHTML = template;

4.数据返回后替换模板（手法比较粗糙 QAQ）

image.png

到这里一切看起来都是很美好，但是我们忽略了一个问题，如果你的style是这样的

style

并且你想要render一个html，像这样

rederHTML

我们再试一下

样式

咦？！我们的样式哪去了? 检查元素看看

检查元素

原来我们丢失一个属性，如有不懂可参考本人写的《css模块化》一文。

接下来我们继续

5.获取属性

获取属性

6.重新编译模板，添加属性

编译

7.最后一步，添加监听

监听

8.挂载自定义指令在vue上

image.png

怎么用？

用法1

直接输入变量，全部使用默认

用法2

使用对象，可以扩展自定义属性，包括行数和style

后记

时间原因，写的比较糙，还有很多需要改进的地方，希望观众老爷多多提些建议哈