vue3自定义指令(directive)
介绍
在vue中除了一些内置的指令,比如v-model
等之外,也可以自己注册自定义指令。
在vue中重用代码的方式有组件和组合式函数。组件一般是用于构建模式,也就是界面,而组合式函数注重于状态的逻辑。
而自定义指令是为了重用涉及到普通元素的底层DOM访问的逻辑。
一个自定义指令是由一个类似组件生命周期函数的对象来定义的,钩子函数会接收到指令绑定的元素作为参数。
例子:一个输入框,一进页面就能自动获取焦点。
<script setup>
// 在模板中启用 v-focus
const vFocus = {mounted: (el) => el.focus()
}
</script><template>// 使用<input v-focus />
</template>
这里的参数el
是DOM元素,在script setup
模式下会认为以小写字母v
开头的驼峰命名法是一个自定义指令。
在一个没有script setup
的情况下,使用directive
进行注册
export default {setup() {/*...*/},directives: {// 在模板中启用 v-focusfocus: {mounted(el) {el.focus();}}}
}
也可以将一个自定义指令进行全局注册
const app = createApp({})// 使 v-focus 在所有组件中都可用
app.directive('focus', {/* ... */
})
指令钩子
一个指令的定义对象可以有多个钩子函数 (都是可选的):
const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
}
钩子参数
指令的钩子会传递以下几种参数:
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 }
。instance
:使用该指令的组件实例。dir
:指令的定义对象。
vnode
:代表绑定元素的底层 VNode。prevNode
:之前的渲染中代表指令所绑定元素的 VNode。仅在beforeUpdate
和updated
钩子中可用。
简化形式
虽然钩子函数很多,但是可能有时候我们仅需要mounted
和updated
,其他的钩子不需要,这时候可以简写。
例如:
app.directive('color', (el, binding) => {// 这会在 `mounted` 和 `updated` 时都调用el.style.color = binding.value
})
对象字面量
如果指令需要多个值,可以直接传递一个JavaScript字面量。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})
组件上使用
在组件上使用时,指令会应用到组件的根节点元素,假如若有多个元素,并不是一个总元素包含所有的元素,则指令将不能使用并有提示。
vue3自定义指令(directive)相关推荐
- Vue3:自定义指令directive
一.vue2自定义指令生命周期 bind: function () {}, inserted: function () {}, update: function () {}, componentUpd ...
- Vue3 自定义指令:ClickOutside(点击当前区域之外的位置)
哈喽,大家好,我是 SuperYing.今天我们聊一个 Vue3 自定义指令 - ClickOutside,顾名思义,就是处理点击当前区域之外的位置的场景. Vue 指令 首先,我们先来回顾一下 Vu ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 第三十九篇 自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
- 29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
- Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
- html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
- vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令 需求 效果 全局 - 自定义指令 代码 局部 - 自定义指令 代码 自定义命令传值 效果 代码 问点 需求 获取标签,扩展额外的功能 效果 全局 - 自定义指令 代码 // mai ...
- Vue 自定义指令(directive)
气温骤降,南京又开始了降温 速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
- JFinal自定义指令Directive
Enjoy Template Engine一如既往地坚持极简设计,核心只有 #if.#for.#switch.#set.#include.#define.#(-) 这七个指令,便实现了传统模板引擎几乎 ...
最新文章
- 模拟频率和数字频率的区别
- 中国电子学会青少年编程能力等级测试图形化一级编程题:无奈的Jaime
- 何恺明、吴育昕最新成果:用组归一化替代批归一化
- 如何开启mysql5.5的客户端服务 命令行打开方法
- ES6的 super 关键字
- java oscache 使用_OScache的使用(Java对象)
- [转]c++类的构造函数详解
- 前端学习(2964):路由的实现
- 如何实现上一条、下一条的功能
- java基数排序简单实现_基数排序简单Java实现
- 电影图标:杀死比尔(Kil Bill)
- php和mysql做甘特图_Twproject Gantt开源甘特图功能扩展
- SketchUp资源网站
- 输入法兼容 android,搜狗输入法5.1版发布 兼容Android 4.4
- php今日头条抓取正文,今日头条文章爬虫采集 - 八爪鱼采集器
- [02]时区时间获取
- 裸机服务器装系统步骤,怎么给裸机装系统……
- CAD梦想画图中的“绘图工具——圆”
- 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图介绍(一)
- 不懂毫米波雷达?5分钟读懂毫米波雷达的那些事儿