Vue.js自定義指令的用法與實例(用隨機的背景色佔位)

一、用來進行DOM操作 在圖片未完成加載前，用隨機的背景色佔位，圖片加載完成後才直接渲染出來；

Vue.directive('img',{
    inserted:function (el,binding){
        var color = Math.floor(Math.random()*1000000);
        el.style.backgroundColor = '#' + color;
        
        var img = new Image();
        img.src = binding.value; //獲得傳給指令的值
        img.onload = function (){
            el.style.backgroundImage = 'url(' + binding.value + ')';
        }
    }
});

<div v-img="val.url" v-for="val in list"></div>
list:[
    {
     url:'1.png'
    },{
     url:'2.png'
    },{
     url:'3.png'
    }
]

二、用於集成第三方插件 例如集成highlight.js

var hljs = require('highlight.js')
Vue.directive('highlight',function(el){
    hljs.highlightBlock(el);
})

<pre><code v-highlight>這是代碼</code></pre>