vue 全局注册img自定义指令引入axios

可以通过以下方式，实现在 Vue 中全局注册 img 自定义指令并引入 axios：

1. 创建一个 Vue 自定义指令：

// main.js
import Vue from 'vue'
import axios from 'axios'

Vue.directive('img', {
  inserted: function (el, binding) {
    axios.get(binding.value).then(response => {
      el.setAttribute('src', response.data)
    })
  }
})

2. 在需要使用的组件中，将需要的图片地址传入 img 指令：

<template>
  <div>
    <img v-img="'/api/img/1.png'">
  </div>
</template>

这样，在组件渲染时，会通过 axios 发送请求获取图片地址并设置到 img 标签的 src 属性中。同时，由于该指令被全局注册，因此可以在任何组件中使用。

相关问题

vue3全局注册自定义指令

要在Vue 3中全局注册自定义指令，可以使用`app.directive`方法。下面是一个示例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('my-directive', {
  mounted(el, binding, vnode) {
    // 在指令绑定到元素时执行的逻辑
  },
  updated(el, binding, vnode, prevVnode) {
    // 在指令所在组件更新时执行的逻辑
  },
  unmounted(el, binding, vnode) {
    // 在指令从元素上解绑时执行的逻辑
  }
});

app.mount('#app');

在上面的示例中，我们使用`app.directive`方法来全局注册一个名为`my-directive`的指令。指令对象包含了三个生命周期钩子：`mounted`、`updated`和`unmounted`。你可以根据需要在这些钩子中编写你的指令逻辑。

然后，在你的组件模板中，你可以像使用其他内置指令一样使用这个自定义指令：

<template>
  <div v-my-directive></div>
</template>

这样，当组件渲染时，`my-directive`指令就会生效。

vue全局注册自定义指令

你可以使用Vue的`directive`方法来全局注册自定义指令。下面是一个示例：

// main.js

import Vue from 'vue';
import App from './App.vue';

// 自定义指令
Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定时的逻辑
  },
  inserted: function (el, binding, vnode) {
    // 元素插入到父节点时的逻辑
  },
  update: function (el, binding, vnode) {
    // 组件更新时的逻辑
  },
  componentUpdated: function (el, binding, vnode) {
    // 组件更新完成后的逻辑
  },
  unbind: function (el, binding, vnode) {
    // 指令解绑时的逻辑
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app');

在上述示例中，我们在全局注册了一个名为"my-directive"的自定义指令。你可以根据需求在不同的生命周期钩子函数中定义自己的逻辑。然后，你可以在任何组件中使用这个自定义指令：

<template>
  <div>
    <span v-my-directive>这是一个自定义指令示例</span>
  </div>
</template>

在上述示例中，我们在`<span>`标签上应用了自定义指令"v-my-directive"。当组件渲染时，指令中定义的逻辑将会被执行。

希望能帮到你！如有任何问题，请随时提问。