Vue 自定义指令应该写在哪里

Vue 自定义指令可以写在 Vue 实例的 directives 选项中，也可以写在单独的 js 文件中，通过 import 引入后再挂载到 Vue 实例的 directives 选项中。

在 Vue 实例中，可以这样定义一个自定义指令：

new Vue({
  el: '#app',
  directives: {
    customDir: {
      bind: function(el, binding) {
        // 指令绑定时的操作
      },
      ...
    }
  }
})

在单独的 js 文件中，可以这样编写一个自定义指令：

// customDirective.js
export default {
  bind: function(el, binding) {
    // 指令绑定时的操作
  },
  ...
}

// main.js
import customDirective from './customDirective'
Vue.directive('customDir', customDirective)

需要注意的是，如果自定义指令是在组件中使用，应该将指令定义在组件的 directives 选项中。

相关问题

vue 自定义指令

Vue 自定义指令是 Vue 中一种非常有用的扩展能力，它允许你在标准的模板语法中使用自定义行为，而不需要编写新的组件或者混入。

Vue 提供了全局的 `Vue.directive()` 方法来注册自定义指令。该方法接受两个参数，第一个参数是指令名称，第二个参数是一个对象，包含了指令的钩子函数。

下面是一个简单的例子，注册了一个 `v-focus` 指令，当元素插入到 DOM 中时，自动聚焦到该元素：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

然后在模板中使用该指令：

<input v-focus>

除了 `inserted` 钩子函数外，还有其他的钩子函数可以使用，例如 `bind`、`update` 和 `unbind` 等。这些钩子函数提供了更丰富的自定义指令功能，可以根据实际情况选择使用。

需要注意的是，自定义指令只能用于操作 DOM，不能修改组件内部的状态。如果需要修改组件内部的状态，应该使用计算属性或者方法来实现。

vue自定义指令

Vue.js 提供了自定义指令的功能，可以用来封装常用的 DOM 操作或者添加特定的行为。自定义指令分为全局指令和局部指令两种。

## 全局指令

在 Vue 实例化之前定义一个全局指令，这个指令可以在任何 Vue 实例中使用。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 指令的定义
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在上面的例子中，我们定义了一个名为 `v-focus` 的全局指令，用于将元素聚焦。这个指令的定义包含 `inserted` 钩子函数，它会在绑定元素插入到父节点时调用。

接下来，在模板中使用这个指令：

<input v-focus>

这样，当这个输入框被插入到页面中时，它会自动获取焦点。

## 局部指令

局部指令只能在当前组件中使用，它的定义方式与全局指令有所不同。

Vue.component('my-component', {
  template: '<input v-model="message" v-focus>',
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})

在上面的例子中，我们在组件的选项中定义了一个局部指令 `v-focus`，它的定义方式与全局指令相同，只不过是在 `directives` 选项中定义而已。

接下来，在模板中使用这个指令：

<my-component></my-component>

这样，当 `my-component` 组件被插入到页面中时，它的输入框元素会自动获取焦点。

以上就是 Vue.js 自定义指令的基本用法。需要注意的是，指令的钩子函数可以有多个，每个钩子函数都有特定的用途，具体可以参考 Vue.js 的官方文档。