vue2自定义指令

作者：′残花败落° 发布日期:2026-01-23 浏览:30

// 自定义指令示例代码

// 1. 全局自定义指令
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 2. 局部自定义指令
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

// 解释说明：
// - `Vue.directive` 用于注册全局指令，第一个参数是指令名称（去掉前缀 `v-`），第二个参数是一个对象，包含钩子函数。
// - `inserted` 钩子函数会在指令绑定的元素被插入到 DOM 后调用，可以用来执行一些 DOM 操作，比如聚焦元素。
// - 在组件内部可以通过 `directives` 选项来注册局部指令，与全局指令类似，只是作用范围仅限于当前组件。

上一篇：vue suspense

下一篇：创建vue项目的命令