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>