vue自定义指令

由于在项目中会加载大量的图片，因此需要使用懒加载技术，虽然网上有很多关于vue的懒加载的插件，如vue-lazyload。但是希望能在项目中通过自定义的组件和一些vue的语法糖去完成，而不是需要时就导入插件，那样学到的东西会很少。关于vue指令的知识请参考官方文档。

在这里我只是介绍一下我写的简单的懒加载指令:

directives: {
    lazy:{
      inserted (el, binding) {
        const value = binding.value
        // 将图片链接赋给绑定对象
        el.setAttribute('src', value)
        // 设置延迟，判断当前能否获取到图片资源，不能时设置默认图片
        setTimeout(() => {
          if (!el.getAttribute('complete')) {
            el.setAttribute('src', 'http://img.warting.com/allimg/2018/1112/1-1Q112224253H3.jpg')
            return false
          }
          return true
        }, Math.random() * 200)
      }
    }
  }