首页 > 其他分享 >一文带你读懂vue3中directive指令的那些事

一文带你读懂vue3中directive指令的那些事

时间:2024-08-23 14:23:28浏览次数:15  
标签:el 调用 directive 绑定 binding vnode 读懂 指令 vue3

概述

vue3 中内置了很多丰富实用的指令,如v-showv-if/v-elsev-model等,但是实际开发中可能我们还需要某些统一的处理,比如交互按钮的防抖,输入框的自动focus等,这时我们就可以通过vue3directive注册自定义指令。

指令

指令钩子

vue3的自定义指令通常情况下是由一个包含类似组件生命周期钩子函数的对象,在DOM节点不同的时期,执行不同的钩子函数,而我们就可以在对应的钩子函数中接收到DOM节点、实例instance等待处理一些业务逻辑。

const myDirective = {
   
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode) {
   
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode) {
   },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode) {
   },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {
   },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {
   },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode) {
   },
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode) {
   },
};

自定义防抖指令

定义指令

一般地,我们只需要在 mounted中或updated中去处理,一个防抖指令如下:

export default {
   
mounted(el, binding) {
   
  if (typeof binding.value !== 'function') {
   
    throw new Error("debounce指令的参数必须是一个函数,延时为1500ms")
    return
  }
  // 初始化时监听
  el.addEventListener('click', () => {
   
    if (!el.disabled) {
   
      el.disabled = true;
      const ti

标签:el,调用,directive,绑定,binding,vnode,读懂,指令,vue3
From: https://blog.csdn.net/m0_46281382/article/details/141461130

相关文章

  • vue3实现拖拽效果 (vuedraggable)
    效果图使用vuedraggable实现拖拽真的是特别丝滑和简单!!下载这里是vue3版本的对应vuedraggable版本4.1.0不要下错了!!!npminstallvuedraggable@4pnpmaddvuedraggable@4官网https://github.com/SortableJS/Vue.Draggable中文网https://www.itxst.com/vue-dragg......
  • 048、Vue3+TypeScript基础,页面通讯之子页面调用父页面的事件
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'constapp=createApp(App);//App.vue的根元素id为appapp.mount('#app')02、App.vue代码如下:<template><......
  • 047、Vue3+TypeScript基础,pinia库store的组合式写法
    01、main.js代码如下:<template><divclass="app"><h2class="title">App.Vue</h2><!--<Page1/>--><br><Page2/></div></template><scriptlang="ts......
  • 045、Vue3+TypeScript基础,pinia库中使用$subscribe订阅数据变动
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • uni-app Vue3项目引入Tailwind CSS
    前情TailwindCSS是一个原子类CSS框架,它将基础的CSS全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名,然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、......
  • vue2和vue3生命周期钩子函数对比图
    vue2->vue3触发条件beforeCreate->使用setup()创建时运行created->使用setup()创建时运行beforeMount->onBeforeMount挂载DOM运行mounted->onMounted挂载DOM运行beforeUpdate->onBeforeUpdate响应数据修改时运行......
  • 详细讲述 Vue3 的 <script setup>
    <scriptsetup>是Vue3引入的一种新的 <script> 标记的用法,其本质是一个语法糖。它极大简化了单文件组件(SFC)的开发体验,目的是让代码更简洁、易读,同时减少模板和逻辑之间的重复。1.基本用法<!--使用<scriptsetup>--><template><div><p>message:{{message......
  • 044、Vue3+TypeScript基础,pinia库中getters的用法
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • vue3解决跨域问题
     vue3登录提示错误 解决方法1,修改根目录下vite.config.ts文件 修改host、proxy、target,修改后文件如下(红色为修改),具体内容根据后台实际修改 server:{ host:'localhost', port:env.VITE_PORTasunknownasnumber, open:JSON.parse(env.VITE_OPEN),......
  • 043、Vue3+TypeScript基础,pinia库使用action,在函数中对存储数据进行修改
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......