除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令,接下来我们一起学习一下
·在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model、v-if等,
在使用的时候不知道有没有想过自己也来实现一个指令呢。本文就以Vue3项目为基础,从原理、方法到实际案例、注意事项,尽可能细致的讲解如何自定义指令。
## 首先我们要明白为什么需要自定义指令,目的是为了简洁可重复操作DOM的逻辑,也就和组件化和组合式函数差不多
不管vue的内置指令还是自定义指令,都有类似组件的生命周期,我们可以在不同的生命周期完成不同的逻辑操作处理,并绑定在组件元素上,这样也就产生了自定义指令,在vue3中,我们有3中方式
定义指令:
·1 在 script setup 定义组件内的指令
有一个语法糖:任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令,然后在模板中使用
来个栗子:在输入框渲染后自动聚焦
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>