話不多說，先上圖
背景：
本人在做圖書demo的一個(gè)項(xiàng)目的時(shí)候，發(fā)現(xiàn)加載詳情頁的時(shí)候滥玷，出現(xiàn)了一個(gè)大大的紅色NaN，等到數(shù)據(jù)返回后才會(huì)變?yōu)檎Ｖ滴±猓襁@樣：
怎么解決惑畴？
相信很多童鞋就會(huì)說用 v-if/v-show 等到數(shù)據(jù)返回來之后在展示。
沒錯(cuò)航徙，筆者之前就是這么干的如贷，但是還是會(huì)出現(xiàn)數(shù)據(jù)加載回來之前出現(xiàn)局部空白。那么有沒有辦法可以改善呢？下面介紹下筆者的解決辦法杠袱，方法略顯粗糙尚猿，請笑納！
解決靈感
記得之前老大在群里說研究一下餓了嗎的這個(gè)技術(shù)：
所以給我這個(gè)方案帶來了靈感楣富，不妨在在數(shù)據(jù)加載之前預(yù)先渲染用一個(gè)設(shè)定好樣式的元素試試呢凿掂。
說干就干
用啥做？
vue有沒有什么可以直接操作dom的纹蝴？我一下想到了vue的自定義指令庄萎。
思路
在數(shù)據(jù)返回之前，先加載一個(gè)預(yù)先設(shè)定的樣式（pre）元素塘安，等到數(shù)據(jù)返回之后再替換真實(shí)（real）元素糠涛。對就是這么簡單！
代碼實(shí)現(xiàn)
1.我們先定義一個(gè)樣式接口
2.定義模板
3.我們把模板插到我們掛載的元素上
el.innerHTML = template;
4.數(shù)據(jù)返回后替換模板（手法比較粗糙 QAQ）
到這里一切看起來都是很美好耙旦，但是我們忽略了一個(gè)問題脱羡，如果你的style是這樣的
并且你想要render一個(gè)html，像這樣
我們再試一下
咦免都？锉罐！我們的樣式哪去了? 檢查元素看看
原來我們丟失一個(gè)屬性，如有不懂可參考本人寫的《css模塊化》一文绕娘。
接下來我們繼續(xù)
5.獲取屬性
6.重新編譯模板脓规，添加屬性
7.最后一步，添加監(jiān)聽
8.掛載自定義指令在vue上
怎么用险领？
用法1
用法2
后記
時(shí)間原因挨下，寫的比較糙，還有很多需要改進(jìn)的地方脐湾，希望觀眾老爺多多提些建議哈
