(详解)Vue自定义指令

简介: (详解)Vue自定义指令

一、背景

在我们日常开发中,会遇到特殊的操作例如,图片懒加载,和类似v-model等等这样的自定义指令

二、提前预习(必看)

自定义指令跟组件一样,也是有生命周期的,我们的操作都是定义在对应的生命周期中,然后进行操作的,然后通过钩子函数传参进行绑定事件等等(先了解下)

2.1自定义指令生命周期

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用;
  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;
  • mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里;
  • beforeUpdate:在更新包含组件的 VNode 之前调用;
  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;
  • beforeUnmount:在卸载绑定元素的父组件之前调用;
  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;

2.2 生命周期四个参数

这里七个钩子函数,钩子函数中有回调参数,回调参数有四个,含义基本上和 Vue2 一致:

  • el:指令所绑定的元素,可以用来直接操作 DOM(可以进行事件绑定)。
  • binding:我们通过自定义指令传递的各种参数
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

三、 自定义指令

3.1私有自定义指令

3.1.1定义指令

在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:

<script>
export default {
  directives: {
      // 自定义私有指令focus,在使用的时候要用 v-focus 。
    focus: {
      mounted(el, binding, vnode) => {
        //el是对应的dom,可以通过el给对应添加事件监听 el.addEventListener
        // binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value
        //vnode是节点
        }
    },
  },
}
</script>

3.1.2使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->    
<input v-focus/>

3.2全局自定义指令

3.2.1定义指令

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:

import { createApp } from 'vue'
const app = createApp({
  /* ... */
})
// 注册(对象形式的指令)
app.directive('my-directive', {
  /* 自定义指令钩子 */
    mounted(el, bindings) {
    }
})
// 注册(函数形式的指令)
app.directive('my-directive', (el, binding, vnode) => {
        //el是对应的dom,可以通过el给对应添加事件监听 el.addEventListener
        // binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value
        //vnode是节点
        })

3.2.2使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->    
<input v-focus/>
目录
打赏
0
0
0
0
2
分享
相关文章
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令,可以为 Vue 应用带来更多的灵活性和扩展性,提高开发效率和用户体验。
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具,使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令,可以提高开发效率,增强应用的功能和用户体验。
前端技术分享:Vue.js 中的自定义指令
【10月更文挑战第1天】前端技术分享:Vue.js 中的自定义指令
91 5
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
386 0
Vue指令的使用以及自定义指令
Vue指令的使用以及自定义指令
61 0
程序与技术分享:8个非常实用的Vue自定义指令
程序与技术分享:8个非常实用的Vue自定义指令
37 0
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
48 0
教你用vue自定义指令做一个组件的遮罩层loading效果
教你用vue自定义指令做一个组件的遮罩层loading效果
707 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等