自定义指令
前言![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ff6d39210dbc5f9f00a5d3b2df88324c.png)
这篇文章介绍vue组件中的自定义指令!看完不会你打我。哈哈哈,开玩笑的,不多说,上刺刀!!
1. 什么是自定义指令
vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。
vue 中的自定义指令分为两类,分别是:
- 私有自定义指令
- 全局自定义指令
2. 声明私有自定义指令的语法
在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:
<script>
export default {
directives: {
// 自定义私有指令focus,在使用的时候要用 v-focus 。
focus: {
mounted(el) {
el.focus()
},
},
},
}
</script>
3. 使用自定义指令
在使用自定义指令时,需要加上 v- 前缀。示例代码如下:
<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->
<input v-focus/>
4. 声明全局自定义指令的语法
全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:
import { createApp } from 'vue'
const app = createApp({
/* ... */
})
// 注册(对象形式的指令)
app.directive('my-directive', {
/* 自定义指令钩子 */
})
// 注册(函数形式的指令)
app.directive('my-directive', () => {
/* ... */
})
// 得到一个已注册的指令
const myDirective = app.directive('my-directive')
5. updated 函数
mounted 函数只在元素第一次插入 DOM 时被调用,当 DOM 更新时 mounted 函数不会被触发。 updated 函数会在每次 DOM 更新完成后被调用。示例代码如下:
// 声明全局自定义指令
app.directive('focus', {
mounted(el) {
console.log('mounted')
el.focus()
},
updated(el) {
console.log('updated')
el.focus()
},
})
注意:在 vue2 的项目中使用自定义指令时,【 mounted 要换成 bind 】【 updated 要换成 update 】
6. 函数简写
如果 mounted 和updated 函数中的逻辑完全相同,则可以简写成如下格式:
app.directive('focus', (el) => {
// 在 mounted 和 updated 都会触发这个函数方法
el.focus()
})
7. 指令的参数值
在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值,示例代码如下:
// 自定义 v-color 指令
app.directive('color', (el, binding) => {
// binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value
el.style.color = binding.value
})
写在最后
✨个人笔记博客✨
✨原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!