vue3-自定义指令

自定义指令

vue 除了内置的制指令(v-model v-show 等)之外,还允许我们注册自定义的指令。

vue 复用代码的方式:

  1. 组件:主要是构建模块。

  2. 组合式函数:侧重有状态的逻辑。

  3. 自定义指令:主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

定义:

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

示例:input 元素自动获取焦点


import { ref } from "vue";
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus(),
};



效果

vue3-自定义指令_第1张图片

该指令比 autofocus attribute 更有用,因为它不仅仅可以在页面加载完成后生效,还可以在 Vue 动态插入元素后生效。

你可能感兴趣的:(vue3,vue.js,javascript,前端,vue)