vue的自定义指令

作者：战天独尊发布日期:2025-12-27 浏览:103

// 定义一个自定义指令 v-focus，它会在插入元素到 DOM 时自动聚焦该元素

// 在 Vue 实例中注册全局指令
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 或者在组件内局部注册自定义指令
new Vue({
  el: '#app',
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

// 使用自定义指令
<template>
  <input v-focus />
</template>

// 解释说明：
// 这个例子展示了如何创建一个名为 'v-focus' 的自定义指令。当带有 v-focus 指令的元素被插入到 DOM 中时，会自动调用 inserted 钩子函数，并执行 el.focus() 方法使元素获得焦点。
// 自定义指令可以是全局注册（通过 Vue.directive），也可以是局部注册（在组件的 directives 选项中）。

上一篇：vue defineprops

下一篇：vue跳转到新页面