用vue 写原生图片懒加载

实现原生图片懒加载，可以借助 Vue.js 的指令来完成。下面是一个使用 Vue.js 实现图片懒加载的示例代码：

1. 在 Vue.js 中注册一个指令：

Vue.directive('lazyload', {
  inserted: function (el) {
    let img = new Image();
    img.src = el.dataset.src;
    img.onload = function () {
      el.src = el.dataset.src;
    };
  }
});

2. 在 HTML 中使用该指令：

<img v-lazyload data-src="image.jpg" />

这样，当 img 元素进入可视区域时，就会触发指令中的 inserted 钩子函数，从而加载真正的图片。