vue自定义指令写在什么位置 • Worktile社区

worktile

Worktile官方账号

在Vue中，自定义指令的定义一般写在一个单独的文件中，命名为directive.js或者类似的名称。同时，你需要确保这个文件在Vue应用的上下文中可用，可以通过以下几种方式将其引入和注册。

在单文件组件中注册指令：如果你的Vue应用使用了单文件组件，你可以在组件的methods或者created生命周期钩子函数中注册指令。例如：

// directive.js
export default {
  // 指令定义
}

// MyComponent.vue
<template>
  ...
</template>
<script>
import directive from './directive.js';

export default {
  ...
  created() {
    // 注册指令
    this.$options.directives = {
      customDirective: directive
    }
  },
  ...
}
</script>

在全局注册中定义指令：如果你想要在整个应用中可用的指令，可以在Vue实例化之前定义并注册指令。例如：

// main.js
import directive from './directive.js';
import Vue from 'vue';

// 注册指令
Vue.directive('customDirective', directive);

new Vue({
  ...
});

无论你选择哪种方式，自定义指令的定义都需要在directive.js中完成。你可以参考Vue官方文档中指令的API和相关示例，根据需求编写出符合你应用需求的自定义指令。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，自定义指令可以写在多个位置。以下是几个常用的位置：

Vue组件内部：可以在组件内部的directives属性中定义自定义指令。在组件的directives属性中，可以使用全局的指令名或者局部指令名来定义自定义指令的函数。

例如，在Vue组件的directives属性中定义一个简单的自定义指令：

Vue.component('my-component', {
  template: '<div v-highlight>Example</div>',
  directives: {
    highlight: {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    }
  }
});

单独的JavaScript文件中：可以将自定义指令定义为一个单独的JavaScript文件，然后在Vue组件中使用import语句导入自定义指令。这种方式适用于自定义指令在多个组件中复用的情况。

例如，将自定义指令定义为一个单独的JavaScript文件highlight.js：

export default {
  bind(el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
}

然后在Vue组件中导入和使用自定义指令：

import highlightDirective from './highlight.js';

Vue.component('my-component', {
  template: '<div v-highlight>Example</div>',
  directives: {
    highlight: highlightDirective
  }
});

全局注册：可以使用Vue.directive方法在Vue实例上全局注册自定义指令。这样，自定义指令可以在所有组件中直接使用。

例如，在main.js文件中全局注册一个自定义指令：

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});

然后，在任何Vue组件中都可以直接使用这个自定义指令：

Vue.component('my-component', {
  template: '<div v-highlight>Example</div>'
});

插件中注册：可以将自定义指令作为一个插件，通过Vue.use方法在Vue实例上全局安装并注册自定义指令。

例如，将自定义指令定义为一个插件customDirectives.js：

export default {
  install(Vue) {
    Vue.directive('highlight', {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    });
  }
}

然后在main.js文件中安装并注册自定义指令的插件：

import customDirectives from './customDirectives.js';

Vue.use(customDirectives);

动态注册：通过Vue的directive方法动态注册自定义指令。这种方式适用于在Vue实例运行期间根据特定条件注册自定义指令的情况。

例如，在Vue实例的某个方法中动态注册一个自定义指令：

methods: {
  registerDirective() {
    Vue.directive('highlight', {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    });
  }
}

这样，在该方法被调用时，自定义指令就会被注册并可以在组件中使用。

总而言之，自定义指令可以写在Vue组件内部、单独的JavaScript文件中、全局注册、插件中注册以及动态注册。根据实际需求和项目结构，选择合适的位置来定义和注册自定义指令。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，自定义指令可以写在不同的位置，具体取决于指令的作用范围和具体需求。下面介绍几种常见的位置：

全局自定义指令
在Vue实例化之前，可以通过Vue的directive方法定义全局的自定义指令。一般在入口文件（如main.js）中引入Vue之后，再定义全局指令。例如：
```
import Vue from 'vue';

// 全局指令：v-focus
Vue.directive('focus', {
  // 指令被绑定到元素上时触发
  bind: function(el) {
    el.focus();
  }
});

new Vue({
  // ...
});
```
这样，在整个应用中都可以使用v-focus指令。
局部自定义指令
如果指令仅需要在某个组件中使用，可以将指令定义在该组件内。可以在组件的directives选项中定义局部指令。例如：
```
export default {
  // ...
  directives: {
    // 局部指令：v-color
    color: {
      // 指令被绑定到元素上时触发
      bind: function(el) {
        el.style.color = 'red';
      }
    }
  }
}
```
这样，只有该组件中可以使用v-color指令。
函数式指令
Vue中的函数式指令不需要维护任何状态，只需要通过传参来实现一定的功能。可以在组件内或者全局范围使用函数式指令。例如：
```
// 全局函数式指令：v-wrap
Vue.directive('wrap', function(el, binding) {
  el.innerHTML = `<div>${binding.value}</div>`;
}, {
  // 函数式指令
  // 指令不需要对应的组件实例
  // 可以通过调用 `this.xxx` 访问全局实例属性
  functional: true
});
```
函数式指令是一种特殊的指令类型，定义时需要传入一个方法，并且指令不会绑定到组件实例上。

无论指令是全局的、局部的还是函数式的，它们都可以在模板中使用。例如：

<template>
  <div>
    <input v-focus>
    <p v-color>Hello, World!</p>
    <span v-wrap="'Text wrapped in a div'"></span>
  </div>
</template>

这样，v-focus、v-color以及v-wrap指令都可以在模板中生效。一般来说，如果一个指令需要在多个组件中使用，可以考虑定义为全局指令；如果一个指令仅在单个组件中使用，可以定义为局部指令；如果一个指令只需要通过传参实现简单功能，可以定义为函数式指令。

1年前 0条评论