本文主要是介绍Vue3实战笔记(62)—Vue3自定义指令入门:10分钟学会基础用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 前言
- 一、如何在Vue 3中创建和使用自定义指令
- 总结
前言
Vue 3 中自定义指令(Custom Directives)的功能依然强大,但API相较于Vue 2有所改变,更加强调Composition API的使用方式。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
一、如何在Vue 3中创建和使用自定义指令
下面是如何在Vue 3中创建和使用自定义指令的简要指南,官方的小例子:
<script setup>
// 在模板中启用 v-focus
const vFocus = {mounted: (el) => el.focus()
}
</script><template><input v-focus />
</template>
很简单一句话就能用了,我刚开始是没看懂的,这定义了一个函数怎么就能当指令用?测试一下,居然可行。
在
学过vue2的都知道指令是需要注册的,在没有使用
//局部注册
export default {setup() {/*...*/},directives: {// 在模板中启用 v-focusfocus: {/* ... */}}
}
// 注册一个全局自定义指令 `v-focus`,该指令用于输入框自动获取焦点
Vue.directive('focus', {// 当绑定元素插入到DOM中时inserted: function (el) {// 聚焦元素el.focus();}
})
简化:
对于自定义指令来说,一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为,除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令,如下所示:
<div v-color="color"></div>
app.directive('color', (el, binding) => {// 这会在 `mounted` 和 `updated` 时都调用el.style.color = binding.value
})
总结
这样,简单的自定义指令就已经学会了。
昨日种种,皆成今我,切莫思量,更莫哀。从今往后,怎么收获,怎么栽。
这篇关于Vue3实战笔记(62)—Vue3自定义指令入门:10分钟学会基础用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!