vue3自定义指令看完这篇就入门了
前言
这篇文章介绍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 })
附:下面根据自定义指令知识点衍生的一个小例子
该例子没有特别的技术难点。只是为了验证一下这两天学习的vue3部分知识点,存粹是一个练手记录~~~
//示例
<template> <p> 改变方向:<input type="text" v-model="direction" /> </p> <p> 改变数值:<input type="range" min="0" :max="maxNum" v-model="pinPadding" /> </p> <p> <button @click="reset">重置</button> </p> <div style="position: relative;border: 1px solid red;width: 800px;height: 400px;margin: 0 auto;"> <p v-pin:[direction]="pinPadding">数据:{{pinPadding}},方向:{{direction}}</p> </div> </template> <script> import two from './components/two.vue' import { ref, reactive, defineComponent, computed } from 'vue' export default ({ name: 'lycApp', components: { two }, setup(prop, context) { const direction = ref('left') const pinPadding = ref(0) const reset = () => { direction.value = 'left' pinPadding.value = 0 } const maxNum = computed(()=>{ if(direction.value == 'right' || direction.value == 'left'){ return 650 }else{ return 360 } }) return { direction, pinPadding, reset, maxNum } }, directives: { pin: { mounted(el, binding) { el.style.position = 'absolute' const s = binding.arg el.style[s] = binding.value + 'px' }, updated(el, binding) { el.removeAttribute('style') el.style.position = 'absolute' const s = binding.arg el.style[s] = binding.value + 'px' } } } }) </script>
//效果图
可以在红色线框内随便改变方向跟距离。
总结
到此这篇关于vue3自定义指令的文章就介绍到这了,更多相关vue3自定义指令内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_61950936/article/details/126458003
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了理解Vue2.x和Vue3.x的自定义指令的用法及钩子函数原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2021-09-24
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 本篇文章主要介绍了Vue.directive自定义指令的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 ...2017-03-13
- 这篇文章主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-31
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 本文主要介绍AngularJS 自定义指令,这里整理了基础资料及详细的示例代码及实现效果图,有需要的小伙伴可以参考下...2016-08-24
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25