【vue】v-自定义指令

前言

在 Vue.js 中,v - 自定义指令 是一种强大的功能,允许开发者扩展 HTML 元素的行为,封装可复用的 DOM 操作逻辑。它类似于内置指令(如 v-modelv-show),但可以根据业务需求自定义功能。

自定义指令的基本概念

自定义指令主要用于操作 DOM 元素,比如:

  • 自动聚焦输入框
  • 格式化日期显示
  • 限制输入内容
  • 实现拖拽、滚动监听等交互 它适用于需要直接操作 DOM 的场景,当组件化方案(如 props、事件)不足以满足需求时,自定义指令是更合适的选择。

自定义指令的使用方式

Vue 提供了两种注册方式:全局注册局部注册

el和binding

在 Vue 自定义指令中,elbinding 是两个重要的参数:

1、el含义:指令所绑定的 DOM 元素本身

makefile 复制代码
javascript
el: HTMLElement

2、 binding 参数

typescript 复制代码
javascript
binding: {
  value: any,        // 传递给指令的值
  oldValue: any,     // 之前的值(仅在 updated 钩子中可用)
  arg: string,       // 传递给指令的参数
  modifiers: Object,  // 修饰符对象
  instance: Object,  // Vue 组件实例
  dir: Object        // 指令定义对象
}

3、案例

全局注册

通过 Vue.directive() 方法注册,可在整个应用中使用:

main.js 复制代码
// 自定义指令
Vue.directive('demo', { 
    mounted(el, binding) {
        console.log('=== el 是什么 ===')
        console.log('el:', el) 
        // 实际的 DOM 元素
        console.log('el.tagName:', el.tagName) 
        // 元素标签名 
        console.log('=== binding 是什么 ===') 
        console.log('binding:', binding)
        console.log('binding.value:', binding.value) 
        // '红色' 或 '蓝色'
        console.log('binding.arg:', binding.arg)
        // 'click'
        console.log('binding.modifiers:', binding.modifiers)
        // { modifier1: true, modifier2: true } 
        // 实际应用:根据传入的值改变文字颜色
        if (binding.value === '红色') { 
            el.style.color = 'red'
        } else if (binding.value === '蓝色') { 
            el.style.color = 'blue'
        }
    }
})

在模板中使用

html 复制代码
<!-- 父组件 --> 
<template> 
    <div> 
        <!-- 指令使用 -->
        <p v-demo="'红色'">这段文字会变成红色</p>
        <p v-demo="'蓝色'">这段文字会变成蓝色</p>
        <button v-demo:click.modifier1.modifier2="handleClick"> 点击按钮 </button>
    </div> 
</template>
<script setup>
const handleClick = () => { 
    console.log('按钮被点击了')
} 
</script
<input v-focus>

局部注册

在组件的 directives 选项中注册,仅在当前组件生效:

js 复制代码
export default {
    directives: { 
        // 注册局部指令 v-color 
        color: { 
            bind: function (el, binding) { 
                // 设置元素颜色为指令参数
                el.style.color = binding.value
            }
        } 
    } 
}
html 复制代码
<p v-color="'red'">这段文字是红色的</p>
相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者3 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴3 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生4 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟4 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1235 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax