vue3.0 如何自定义指令
Posted 郝艳峰Vip
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0 如何自定义指令相关的知识,希望对你有一定的参考价值。
前言
本篇博客是基于vue3.0
的自定义指令开发教程,(有版本变化会持续更新)其中会列出如何使用以及与vue2.0
的自定义指令的对比。
一, Vue3.0
自定义指令教程
demo中,包含一个很简单的一键复制指令,不需要再下载插件,很好用的
先看看 vue3.0官方文档如何介绍: 官方文档传送门
自定义指令的作用:主要是为了重用涉及普通元素的的底层DOM的访问逻辑
自定义指令可以局部注册也可以全局注册,再平时开发过程中使用较多的是全局自定义指令。
一:局部注册
直接上代码,一目了然
<template>
<input type="text" name="" v-focus value="">
</template>
<script>
// 局部自定义指令
const focus =
mounted: (el) =>
el.focus();
export default
directives:
focus
,
data()
return
,
</script>
二:全局注册
1. 在src
目录下新建文件directives
目录,里边建index.js
文件
文件内容如下
const directives =
install: ((app) =>
// 更改颜色 一般就是用这种简化形式就足够了
// 这种简化形式的写法会在钩子函数'mounted'和'updated'中调用
app.directive('selfcolor', (el, binding) =>
el.style.color = binding.value;
);
// 点击按钮一键复制
app.directive('selfCopy', (el, binding) =>
el.onclick = () =>
console.log(binding.value)
if (!binding.value)
alert('不能复制空文本');
return false;
navigator.clipboard.writeText(binding.value);
alert('复制成功')
);
// 对象字面量 指令可以接受任何合法的javascript表达式
app.directive('objectParams', (el, binding) =>
console.log(binding.value)
console.log(binding.arg)
);
//数组
app.directive('arrayParams', (el, binding) =>
console.log(binding.value[1])
);
// 测试所有生命周期
app.directive('testLifeCycle',
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode)
// 下面会介绍各个参数的细节
,
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) ,
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode)
console.log(binding);
console.log(binding.modifiers);
if (Object.keys(binding.modifiers).length == 0)
alert('说明没有传修饰符');
return false;
alert('说明传了修饰符')
,
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) ,
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) ,
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) ,
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode)
);
)
export default directives;
2. 在main.js
文件中注册
import createApp from 'vue'
import App from './App.vue'
const app = createApp(App);
// 全局注册自定义指令
import selfDirectives from './directives/index.js';
app.use(selfDirectives);
app.mount('#app');
如上,注册完毕,就可以在整个项目中使用了。
3. 在页面中使用
<template>
<div class="main" v-selfcolor="color">测试自定义指令 </div>
//一键复制功能
<input type="button" name="" v-selfCopy="text" value="复制按钮">
//默认聚焦
<input type="text" name="" v-focus value="">
指令内传对象以及arg 传递给指令的参数
<div v-objectParams:argVariable="color:'blue',name:'张三'">指令内传对象</div>
<div v-arrayParams="[
name:'张三',
age:13
,
name:'李四',
age:12
]">指令内传数组</div>
//修饰符
<div v-testLifeCycle.selfModifiers="'测试生命周期'">测试生命周期</div>
</template>
<script>
export default
data()
return
color: 'red',
text:'要复制的文本',
,
</script>
<style scoped>
</style>
二, 自定义指令钩子生命周期和钩子参数
- a, 指令钩子的生命周期
生命周期 | 何时调用 | 参数 |
---|---|---|
created | 在绑定元素的 attribute 前或事件监听器应用前调用 | el, binding, vnode, prevVnode |
beforeMount | 在元素被插入到 DOM 前调用 | 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 |
- b, 指令钩子的钩子参数
钩子参数 | 作用 |
---|---|
el | 指令绑定到的元素。这可以用于直接操作 DOM。 |
binding | 一个对象,包含以下属性。 |
binding.value | 传递给指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。 |
binding.oldValue | 之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。 |
binding.arg | :传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 “foo”。 |
binding.modifiers | 一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 foo: true, bar: true 。 |
binding.instance | 使用该指令的组件实例。 |
binding.dir | 指令的定义对象。 |
vnode | 代表绑定元素的底层 VNode。 |
prevNode | 之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。 |
三,Vue3.0自定义指令和2.0自定义指令的异同?
生命周期不同,钩子函数参数不同
以下列出vue2.0
的指令的钩子函数和钩子函数参数,请自行与上文中的3.0的对比
vue2.0钩子函数
生命周期 | 何时调用 | 参数 |
---|---|---|
bind | 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 | el, binding, vnode, oldVnode |
inserted | 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 | el, binding, vnode, oldVnode |
update | 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有 | el, binding, vnode, oldVnode |
componentUpdated | 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 | el, binding, vnode, oldVnode |
unbind | 只调用一次,指令与元素解绑时调用。 | el, binding, vnode, oldVnode |
vue2.0钩子函数参数
钩子参数 | 作用 |
---|---|
el | 指令绑定到的元素。这可以用于直接操作 DOM。 |
binding | 一个对象,包含以下属性。 |
binding.name | 指令名,不包括 v- 前缀。 |
binding.value | 传递给指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。 |
binding.oldValue | 之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。 |
binding.expression | 字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。 |
binding.arg | :传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 “foo”。 |
binding.modifiers | 一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 foo: true, bar: true 。 |
vnode | Vue 编译生成的虚拟节点 |
oldVnode | 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。 |
以上是关于vue3.0 如何自定义指令的主要内容,如果未能解决你的问题,请参考以下文章