vue3:自定义指令

简介: vue3:自定义指令

一、理解vue指令

1.1、指令

在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性 <div v-xxx ></div>。自定义指令很大程度提高了开发效率,提高了工程化水平,一定要认真学习。

1.2、内置指令

在Vue中,诸如v-if、v-for、v-on等等被称之为内置指令,它们都是以v-开头的,我们无需注册即可在全局使用它们,内置指令提供了极大的方便给我们,比如v-for指令可以让我们快速循环出很多dom元素。

1.3、自定义指令

顾名思义,自己定义自定义指令的方法,实现我们需要的指令功能。

二、自定义指令钩子

2.1、vue2自定义指令钩子

bind():当指令绑定在 HTML 元素上时触发

inserted():当指令绑定的元素插入到父节点中的时候触发

update():当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发

componentUpdated():当 update() 执行完毕之后触发

unbind():当指令绑定的元素从 dom 中删除时触发

2.2、vue3自定义指令钩子

created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。

beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里

beforeUpdate:在更新包含组件的 VNode 之前调用。

updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount:在卸载绑定元素的父组件之前调用

unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

三、自定义指令参数

created(el, binding, vnode, prevNode) {}

el:指令绑定到的元素。这可以用于直接操作 DOM。

binding:一个对象,包含以下属性:

       value:传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。

       oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。

       arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 "foo"。

       modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。

       dir:指令的定义对象。

       instance:使用该指令的组件实例。

vnode:代表绑定元素的底层 VNode。

prevNode:之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

四、vue3 + ts 实践自定义指令

4.1、局部自定义指令

4.1.1、在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令

<template>
    <input v-focus />
</template>
<script setup>
    // 在模板中启用 v-focus
    const vFocus = {
      mounted: (el: any) => el.focus()
    }
</script>
<style scoped lang="less">
  input{
    border: 1px solid #000;
  }
</style>

4.1.2、options api 自定义指令需要在directives选项中注册

<template>
  <input v-focus />
</template>
<script>
export default{
  setup() {},
  directives: {
    // 指令名
    focus: {
      // 生命周期
      mounted(el) {
        // 处理DOM的逻辑
        el.focus()
      },
    }
  }
}
</script>

4.2、全局自定义指令

4.2.1、src/directives/focus.ts

export default function(app: any) {
app.directive("focus", {
    mounted(el: any) {
      console.log("focus mounted");
      el.focus();
    }
  })
}

4.2.2、src/directives/index.ts

import registerFocus from './focus'; // 获取焦点
export default function registerDirectives(app: any) {
    registerFocus(app);
}

4.2.3、 main.ts

import registerDirectives from './directives'
const app = createApp(App)
registerDirectives(app)

4.2.4、src/views/directives/index.vue

<template>
  <div class="directives">
    <input v-focus />
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
  input{
    border: 1px solid #000;
  }
</style>

4.2.5、效果

4.3、在组件上使用指令

因为vue3可以有多个根节点,当有一个根节点时使用指令没有问题,如果有多个根节点使用指令回报错,建议多个根节点可以在组件内部使用指令。

五、常用的自定义指令积累(以全局自定义指令的方式记录)

5.1、input获取焦点

src/directives/focus.ts

// 获取焦点
export default function(app: any) {
app.directive("focus", {
    mounted(el: any) {
      console.log("focus mounted");
      el.focus();
    }
  })
}

5.2、 防抖

5.2.1、src/directives/debounce.ts

// 防抖
export default function(app: any) {
  app.directive("debounce", {
    mounted(el: any, binding: any) {
      let timer:any
      el.addEventListener('click', () => {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          binding.value()
        }, 1000)
      })
    }
  })
}

5.2.2、src/views/directives/index.vue

1秒触发一次,连续点击不会多次触发。

<template>
  <div class="directives">
    <el-button v-debounce="debounceClick">debounce-button</el-button>
  </div>
</template>
<script setup lang="ts">
  const debounceClick = () => {
    console.log('1s触发一次')
  }
</script>

5.2.3、效果

5.3、其他待补充

六、欢迎交流指正,关注我,一起学习

相关文章
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
9天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
32 1
|
11天前
|
JavaScript 编译器 API
vue2和vue3区别
vue2和vue3区别
16 4
|
1天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
9天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
36 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
10天前
|
JavaScript
|
10天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
10天前
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页