vue自定义指令（图片加载不出来，使用默认图片）

官网解释全局自定义指令
v-什么的都是指令
应用场景：vue框架内置的指令系统无法满足我们业务需求

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

my-directive:这个是名称
第二个是个函数里面是一个一个的函数；
语法： <img v-自定义指令 />

思路：监听img的onerror事件
第一步：引入vue

import vue from 'vue'

使用全局指令注册一下：并且引入到mian.js 全局里面

vue.directive('errorimg' ,{
	//执行时机：绑定了当前指令的元素的所有属性和事件
	inserted(el){
		//获取的是真是的dom元素，可以使用dom的所有事件
		console.log(el)
		el.onerror = function(){
			//将默认图片赋值给el.src属性
			el.src = '默认图片地址'
		}
	}，
})

如果有分页例如< 1 2 3 4 >
会在第二页的不会渲染
这个时候我们就换个函数

  componentUpdated: function () {},

打印一下结果依旧是真实的dom元素，

vue.directive('errorimg' ,{
	//执行时机：绑定了当前指令的元素的所有属性和事件
	inserted(el){
		//获取的是真是的dom元素，可以使用dom的所有事件
		console.log(el)
		el.onerror = function(){
			//将默认图片赋值给el.src属性
			el.src = '默认图片地址'
		}
	},
	componentUpdated: function (el) {
		el.src = '默认图片地址'
	},
})