vue directives

作者：ˉ吻干迩的'泪发布日期:2026-06-08 浏览:124

// Vue 自定义指令示例

// 引入 Vue
import Vue from 'vue';

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

解释说明：

Vue.directive('focus', {...})：注册一个名为 v-focus 的全局指令。当元素插入到 DOM 中时，会自动聚焦该元素。
inserted 钩子函数：当指令绑定的元素插入到 DOM 中时触发。在这个例子中，我们使用 el.focus() 方法来让元素获得焦点。
el 参数：代表指令所绑定的 DOM 元素。

如果你在 HTML 中使用这个指令，例如 <input v-focus>, 输入框将会在页面加载后自动获得焦点。

上一篇：vue class动态绑定样式

下一篇：vue $nexttick