关键词：
前言
本篇博客是基于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',
,
</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如何自定义指令(代码片段)
...教程，（有版本变化会持续更新）其中会列出如何使用以及与vue2.0的自定义指令的对比。一，Vue3.0自定义指令教程demo中，包含一个很简单的一键复制指令,不需要再下载插件，很好用的先看看vue3.0官方文档... 查看详情
vue2.0和vue3.0中自定义指令（directive）的区别(代码片段)
目录使用自定义指令vue2.0组件中注册全局中注册Vue3.0小坑自定义指令中的参数 vue2.0和vue3.0中的区别其他区别===》 vue2.0和vue3.0中语法的区别自定义指令是什么？类似于vue中的v-for v-if v-model...类似的指令语法，... 查看详情
vue3.0中用自定义指令实现图片懒加载(代码片段)
....0使用)中的 useIntersectionObserver vue.use插件的使用vue3.0自定义指令 使用场景①每一张图片都要进行懒加载操作，在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态浏... 查看详情
[浅析]vue3.0中的自定义渲染器(代码片段)
Vue3.0中支持自定义渲染器(Renderer)：这个API可以用来自定义渲染逻辑。它可以将VirtualDOM渲染为Web平台的真实DOM。（在以往像weex和mpvue，需要通过fork源码的方式进行扩展）。1.自定义渲染器的原理渲染器是围绕VirtualD... 查看详情
[浅析]vue3.0中的自定义渲染器(代码片段)
Vue3.0中支持自定义渲染器(Renderer)：这个API可以用来自定义渲染逻辑。它可以将VirtualDOM渲染为Web平台的真实DOM。（在以往像weex和mpvue，需要通过fork源码的方式进行扩展）。1.自定义渲染器的原理渲染器是围绕VirtualD... 查看详情
[浅析]vue3.0中的自定义渲染器(代码片段)
Vue3.0中支持自定义渲染器(Renderer)：这个API可以用来自定义渲染逻辑。它可以将VirtualDOM渲染为Web平台的真实DOM。（在以往像weex和mpvue，需要通过fork源码的方式进行扩展）。1.自定义渲染器的原理渲染器是围绕VirtualD... 查看详情
在react里写vue3?还写了自定义hooks和hoc构建了响应式！(代码片段)
作者| 👽来源| 前端Sharing前言自从vue3.0正式发布之后，vue3.0核心响应式部分被单独抽离成@vue/reactivity包，也就是说，我们可以脱离vue框架之外，单独使用@vue/reactivity做一些其他的愉快的事😊，... 查看详情
vue3.0的新特征|vue3.0面试题总结(代码片段)
...了Vue2.x时期遗留的一些缺陷，又引入了组合式API、自定义渲染API等新特性。这些新特性的引入，不仅为Vue的发展注入了更多的活力，同时也塑造了Vue使用场景方面更多的可能性。Vue3.0的新特性Proxy响应式绑定Tree-ShakingS... 查看详情
vue---自定义指令的使用(代码片段)
在vue开发项目中，指令的使用场景也是比较多的，那么该如何定义使用呢？找到src/directive下新建gender目录，下面新建index.js和gender.js index.jsimportgenderfrom‘./gender‘constinstall=function(Vue)Vue.directive(‘gender‘,gender)if(window.Vue)win 查看详情
十自定义指令与eslint代码检查工具使用(代码片段)
一、自定义指令1.1、什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。1.2、自定义指令的分类vue中的自定义指令分为两类，分别是：私有自定义指令全局自定义... 查看详情
javascript自定义指令(代码片段)
typescript自定义指令(代码片段)
typescript自定义指令(代码片段)
javascriptvue自定义指令(代码片段)
vue3.0单文件组件-sfc语法定义(代码片段)
...e 作为文件扩展名，它是一种使用了类似HTML语法的自定义文件格式，用于定义Vue组件。一个Vue单文件组件在语法上是兼容HTML的。 每一个 *.vue 文件都由三种顶层语言块构成：<template>、<script> 和... 查看详情
vue自定义指令(代码片段)
Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。//注册一个全局自定义指令`v-focus`Vue.directive(‘focus‘,//当被绑定的元素插入到DOM中时……inserted:function(el)//聚焦元素el.focus()) 局部指令：directiv... 查看详情