前言
迫不及待想要上车试一试，直接贴代码吧。
开始
两个小例子，图片的加载优化以及第三方插件的配合使用。参考的资料在我分享的这篇博文中有记录，感兴趣的同学，可以参考更多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue自定义指令的使用与实践</title>
<!-- 引入代码高亮的样式 -->
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet">
<style>.img{ width: 300px; height: 200px; background-size: 100%; }</style></head>
<body>
<div id="app">
<!-- v-img -->
<div class="img" v-for="img in imgList" :key="index" v-img:async.lazy="img.url"></div>
<!-- v-highlight -->
<div>
<pre>
<code v-highlight class="javascript">function init(){ $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }</code></pre>
</div>
</div>
</body>
<!-- 引入框架 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入插件 -->
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>window.onload = function() {
// 写在new Vue()之前;可以在全局使用。
Vue.directive('img', {
inserted: function(el, binding) {
// =值
// console.log(binding.value);
// :参数
// console.log(binding.arg);
// .修饰符
// console.log(binding.modifiers);
// #FFFFFF
var color = Math.floor(Math.random() * 1000000);
el.style.backgroundColor = '#' + color;
var img = new Image();
img.src = binding.value;
img.onload = function() {
setTimeout(function() {
el.style.backgroundImage = 'url(' + binding.value + ')';
},
1000);
}
}
});
Vue.directive('highlight', {
inserted: function(el) {
console.log(el) hljs.highlightBlock(el);
}
}) new Vue({
el: '#app',
data: {
msg: 'hello',
imgList: [{
url: 'http://img.zcool.cn/community/013ab856f4c9cd6ac72579487b51cc.jpg'
},
{
url: 'http://s4.sinaimg.cn/mw600/001oLWdezy6LkMvA3RN63&690'
},
{
url: 'http://img.zcool.cn/community/01d24457888b050000012e7e4c119a.png'
}]
}
});
}
</script>
</html>实践
纸上得来终觉浅，绝知此事要躬行。实践的过程中，一开始引入了highlight.js文件，没有引入相应的css。虽然进行了处理，但是看起来和普通的文本一样。所以...
BootCDN: https://www.bootcdn.cn/highlight.js/
来张效果图：
总结
欢迎留言指导，感谢~或者扫描下方二维码，与我取得联系~ （记得备注：CSND喔~）
