一、在<script setup lang="ts">中，局部注册自定义指令
具体步骤：
1.定义一个变量名，按照v开头的规则来定义，并且v后面的变量名首字母大写，eg:vImg
2.vue3和vue2自定义指令的方式不同，一个指令的定义对象有很多钩子函数可选，一般我们直接用mounted这个钩子函数
其他钩子函数及其参数的使用，可以直接参考vue3自定义指令官方文档：
自定义指令 | Vue.js
3.el可以获取DOM元素上的属性，binding里面的value属性可以获取传过来的属性值
4.当图片加载错误时，调用el.onerror，将获取到的value值赋值给el上的src，就可以完成图片错误时的占位
实现代码：
<script setup lang="ts">
// 局部自定义图片占位
const vImg = {
mounted: (el: any, binding: { value: string }) => {
console.log(el, 1111111)
el.onerror = () => {
el.src = binding.value
}
}
}
</script>
html结构：
<img
style="width: 80px; height: 80px"
v-img="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:src="userList.avatar"
alt=""
/>
二、在main.ts中全局注册自定义指令
具体步骤：
1.直接使用：app.directive('指令名',{}）
2.和局部注册一样，在mounted钩子函数中写业务代码
实现代码：
// 全局自定义错误占位图
app.directive('errorImg', {
mounted(el, binding) {
console.log(el, 1111)
console.log(binding, 222)
el.onerror = () => {
el.src = binding.value
}
}
})
html中使用：
<img
style="width: 80px; height: 80px"
v-errorImg="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:src="userList.avatar"
alt=""
/>
