vue 自定义指令

  • • vue 自定义指令

    • • 全局指令 Vue.directive()

    • • 局部指令 directives

    • • 分类

    • • vue 自定义指令 钩子函数

  • • vue3 自定义指令

    • • 全局指令 app.directive()

    • • 局部指令 directives

    • • 分类

    • • vue3 自定义指令 钩子函数

vue 自定义指令

除了Vue提供的内置指令之外,你还可以自定义指令来扩展Vue的行为。

自定义指令可以让你 在DOM元素上添加自定义行为或样式,并且可以重复使用这些行为和样式,从而提高代码的复用性。

Vue中自定义指令有两种方式:全局指令和局部指令。

分类

全局指令 Vue.directive()

  1. 1. 全局指令全局指令是注册在Vue构造函数上的指令,可以在整个应用程序的任何实例中使用。你可以使用Vue.directive()方法来创建全局指令,该方法接受两个参数:指令名称 和 指令选项对象 。例如,下面是一个自定义的v-focus指令,在元素插入到DOM时将焦点设置在该元素上:

    Vue.directive('focus', {
      insertedfunction (el) {
        el.focus()
      }
    })

    然后在模板中可以像下面这样使用v-focus指令:

    <input v-focus>

    注意,在全局指令中,指令名称需要以v-开头 。

    局部指令 directives

  2. 2. 局部指令局部指令是在组件中注册的指令,只能在该组件及其子组件中使用。你可以在组件的选项对象中使用directives属性来注册局部指令。例如,下面是一个组件的局部指令v-scroll,当用户向下滚动时触发该指令:

    export default {
      directives: {
        scroll: {
          insertedfunction (el, binding) {
            window.addEventListener('scroll', binding.value)
          },
          unbindfunction (el, binding) {
            window.removeEventListener('scroll', binding.value)
          }
        }
      },
      // ...
    }

    然后在组件的模板中,可以像下面这样使用v-scroll指令:

    <div v-scroll="handleScroll">
      <!-- ... -->
    </div>

    注意,在局部指令中,指令名称不需要以v-开头 。

通过自定义指令,你可以根据具体的需求来扩展Vue的功能。

指令的选项对象可以包含多个生命周期函数,例如inserted、bind、update等,你可以根据需要来选择不同的生命周期函数进行处理。

同时,自定义指令也是Vue插件的一种方式,在开发插件时可以使用自定义指令来增强Vue的功能。

vue 自定义指令 钩子函数

在Vue中,自定义指令的选项对象可以包含一些钩子函数,这些钩子函数在指令的不同生命周期阶段被调用。下面是一些常用的钩子函数:

  1. 1. bind:只调用一次,在指令被绑定到元素时调用。可以在这个钩子函数中进行初始的设置、绑定事件监听器等操作。

  2. 2. inserted:在被绑定元素插入到父节点时调用(仅保证父节点存在,但不一定已被插入DOM中)。可以在这个钩子函数中执行元素的插入操作,如设置焦点、添加样式等。

  3. 3. update:在指令所在元素的模板更新时调用,但可能发生在其子元素模板更新之前。比较常见的使用场景是对比指令的绑定值(binding.value)和更新值(binding.oldValue),并根据需要进行相应的操作。

  4. 4. componentUpdated:在指令所在元素的模板及其子元素的模板都更新后调用。可以在这个钩子函数中进行操作,如更新元素状态、调用第三方库的方法等。

  5. 5. unbind:只调用一次,在指令与元素解绑时调用。可以在这个钩子函数中清除绑定的事件监听器、移除样式等。

这些钩子函数可以在自定义指令的选项对象中使用,例如:

Vue.directive('customDirective', {
  bindfunction (el, binding) {
    // 初始化设置
  },
  insertedfunction (el, binding) {
    // 元素插入父节点后的操作
  },
  updatefunction (el, binding) {
    // 元素模板更新时的操作
  },
  componentUpdatedfunction (el, binding) {
    // 元素及子元素模板都更新后的操作
  },
  unbindfunction (el, binding) {
    // 解绑时的清理操作
  }
})

在以上的钩子函数中,el参数是指令所绑定的元素,binding参数是一个对象,包含了指令的信息,如value(绑定值)、oldValue(旧的绑定值)、arg(参数)、modifiers(修饰符)等。

通过使用这些钩子函数,你可以在自定义指令的不同生命周期阶段处理相应的逻辑,实现更灵活和强大的指令功能。

vue3 自定义指令

在Vue 3中,自定义指令的方式与Vue 2有所不同。

通过app.directive()方法来创建全局指令,或者在组件的directives选项中注册局部指令。

分类

全局指令 app.directive()

局部指令 directives

下面是Vue 3中自定义指令的示例:

  1. 1. 全局指令:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

然后在模板中使用v-focus指令:

<!-- App.vue -->
<template>
  <input v-focus>
</template>
  1. 1. 局部指令:

// MyComponent.vue
export default {
  directives: {
    scroll: {
      mounted(el, binding) {
        window.addEventListener('scroll', binding.value)
      },
      unmounted(el, binding) {
        window.removeEventListener('scroll', binding.value)
      }
    }
  },
  // ...
}

然后在组件的模板中,可以像下面这样使用v-scroll指令:

<!-- MyComponent.vue -->
<template>
  <div v-scroll="handleScroll">
    <!-- ... -->
  </div>
</template>

在Vue 3中,自定义指令的选项对象中只包含两个钩子函数:mountedunmounted

mounted钩子函数在指令所在元素被挂载到DOM后调用,而unmounted钩子函数在指令所在元素从DOM中卸载后调用。

除了钩子函数外,指令对象还可以使用其他的配置项,如beforeMountupdatedbeforeUnmount等。

但这些配置项在Vue 3中被视为高级选项,并且不建议频繁使用。

通过自定义指令,你可以在Vue 3中扩展元素的行为和样式,并根据需要执行相应的逻辑。

vue3 自定义指令 钩子函数

在Vue 3中,自定义指令可以使用的钩子函数有以下几个:

  1. 1. beforeMount:在指令所在组件挂载之前调用,即在beforeMount生命周期钩子之前调用。

  2. 2. mounted:在指令所在组件挂载到DOM后调用,即在mounted生命周期钩子之后调用。

  3. 3. beforeUpdate:在指令所在组件更新之前调用,即在beforeUpdate生命周期钩子之前调用。

  4. 4. updated:在指令所在组件更新之后调用,即在updated生命周期钩子之后调用。

  5. 5. beforeUnmount:在指令所在组件卸载之前调用,即在beforeUnmount生命周期钩子之前调用。

  6. 6. unmounted:在指令所在组件卸载之后调用,即在unmounted生命周期钩子之后调用。

这些钩子函数可以在自定义指令的选项对象中使用,例如:

import { createApp } from 'vue'

const app = createApp()

app.directive('customDirective', {
  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) {
    // 指令被解绑之后的操作
  }
})

app.mount('#app')

在以上的钩子函数中,el参数是指令所绑定的元素,binding参数是一个对象,包含了指令的信息,vnode参数是虚拟节点,prevVnode参数是前一个虚拟节点(仅在beforeUpdateupdated钩子函数中可用)。

通过使用这些钩子函数,你可以在自定义指令的不同生命周期阶段处理相应的逻辑,例如在组件挂载前后进行操作、在组件更新前后执行一些特定逻辑等。请根据具体需求选择合适的钩子函数来使用。


原文始发于微信公众号(前端爱好者):vue 自定义指令

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/267043.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!