位置: IT常识 - 正文

vue2.x与vue3.x中自定义指令详解(vue2vue3的区别)

编辑:rootadmin
vue2.x与vue3.x中自定义指令详解

推荐整理分享vue2.x与vue3.x中自定义指令详解(vue2vue3的区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2.x和vue3.x的区别,vue3和vue2求区别,vue3和2的区别,vue2与3的区别,vue2.x和vue3.x的区别,vue2与3的区别,vue2与3的区别,vue2与3的区别,内容如对您有帮助,希望把文章链接给更多的朋友!

🐱 个人主页:不叫猫先生 🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源码可以找我免费领取 🔥 前端学习交流:博主建立了一个前端交流群,汇集了各路大神,互相交流学习,期待你的加入!(文末有我wx或者直接私信)

🍬目录🌮前言🥙一、自定义指令分类🥪二、Vue2.x自定义指令钩子函数(1)bind与update区别(2)update与componentUpdated区别(3)钩子函数的参数(摘自官网)(4)局部自定义指令(5)全局自定义指令(6)简写形式🍔 三、Vue3.x自定义指令钩子函数(1)指令钩子函数(摘自官网)(2)钩子函数参数(3)局部注册两种方式(4)全局注册(5)简化形式🌮前言

vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作,比如防抖、节流、懒加载、输入框自动聚焦等等,使用起来非常方便,比如vue自带的v-text、v-html、v-show、v-if等等。

🥙一、自定义指令分类局部自定义指令:只在组件内有效全局自定义指令:所有组件都有效🥪二、Vue2.x自定义指令钩子函数

bind:只会调用一次,指令 第一次 绑定到元素时会调用

inserted:被绑定元素插入父节点时调用 。

update:元素第一次绑定不会触发,绑定的值发生更新触发,可能发生在其子节点更新之前。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

(1)bind与update区别vue2.x与vue3.x中自定义指令详解(vue2vue3的区别)

相同点:

dom插入都会调用,bind在inserted之前

异同点:

bind 时父节点为 nullinserted 时父节点存在bind是在dom树绘制前调用,inserted在dom树绘制后调用(2)update与componentUpdated区别组件更新都会调用,update在componentUpdated之前update 组件更新前的状态,componentUpdated 组件更新后的状态Vue.directive('focus', { inserted: function (el) { console.log(el.parentNode, 'inserted') el.focus(); }, bind: function (el) { console.log(el.parentNode, 'bind') el.focus(); },});

输出结果如下,说明执行bind时,还没父节点;执行inserted时,已有父节点。

(3)钩子函数的参数(摘自官网)el:指令所绑定的元素,可以用来直接操作 DOM。binding:一个对象,包含以下 property:name:指令名,不包括 v- 前缀。value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。 <p v-style:[direction]="connect">Enter connection information to connect</p> directives: { style: { bind(el,binding) { console.log(binding,'binding') el.style.fontSize = "30px"; el.style.color = "blue"; }, }, },

(4)局部自定义指令

在组件A.vue,用自定义指令实现改变文字颜色

<p v-style>文字描述</p> directives: { style: { bind(el,binding) { el.style.fontSize = "30px"; el.style.color = "blue"; }, update(el,binding){ el.style.fontSize = "30px"; el.style.color = "blue"; } }, },style:指令的名称,使用的时候要加前面加个v-bind:只会调用一次,指令 第一次 绑定到元素时会调用el:是指绑定的这个dom元素本身binding:获取绑定指令的信息(name:指令名称;rawName:指令全称:value:指定绑定的值)update:元素第一次绑定不会触发,绑定的值发生更新触发,参数与binding是相同的,如果逻辑与bind相同的话可以直接把指令当成函数写,上面的指令是对象类型。v-style:使用指令改变了元素的样式(5)全局自定义指令

使用Vue.directive(‘指令名称’,{钩子函数})

第一个参数为字符串,指令的名称第二个参数是一个对象,用于接收指令的参数值Vue.directive('style',{ bind(el) { el.style.fontSize = "30px"; el.style.color = "blue"; }, },)(6)简写形式

如果update逻辑与bind相同的话可以直接把指令当成函数写

directives: { style(){ el.style.fontSize = "30px"; el.style.color = "blue"; }, },🍔 三、Vue3.x自定义指令钩子函数(1)指令钩子函数(摘自官网)const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 }, // 在元素被插入到 DOM 前调用 beforeMount(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) {}}(2)钩子函数参数

指令的钩子会传递以下几种参数:

el:指令绑定到的元素。这可以用于直接操作 DOM。

binding:一个对象,包含以下属性。 value:传递给指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。 oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。 arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 “foo”。 modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。 instance:使用该指令的组件实例。 dir:指令的定义对象。

vnode:代表绑定元素的底层 VNode。

prevNode:之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

(3)局部注册两种方式<script lang="ts" setup>// 局部指令, 变量名为驼峰命名(vFocus = v-focus)const vFocus = { mounted: (el:any) => { el.focus() console.log(el, '已经自动获得焦点') }}</script><script lang="ts">const vFocus = { focus: { mounted(el:any){ el.focus(); console.log(el, "已经自动获得焦点"); } },};export default { setup() { }, directives: vFocus,};</script>(4)全局注册组件A.vue <input type="text" v-focus>在directives文件夹新建focus.ts文件const directives: any = {mounted(el: any) {el.focus();el.value = '1'}}export default {name: "focus",directives}在directives文件夹新建index.jsimport type { App } from 'vue'import focus from './focus'export default function installDirective(app: App) { app.directive(focus.name, focus.directives);} main.ts文件import directives from './directives'const app = createApp(App);app.use(directives);(5)简化形式

当update和mounted中的函数体一样时,则可以简写成如下:

const directives = (el:any) => {el.focus();el.value = '1';}export default {name: "focus",directives}
本文链接地址:https://www.jiuchutong.com/zhishi/299691.html 转载请保留说明!

上一篇:第一次尝试制作一个钓鱼网站,小白教程,超细!(我初次尝试制作的英文怎么写)

下一篇:【tensorflow】制作自己的数据集(tensorflow gui)

  • 小米呼叫限制解除方法(小米呼叫限制解决方法)

    小米呼叫限制解除方法(小米呼叫限制解决方法)

  • 小红书清理缓存在哪(小红书清理缓存后该占9G)

    小红书清理缓存在哪(小红书清理缓存后该占9G)

  • 抖音怎么用一个手机号注册两个号(抖音怎么用一个身份证认证多个号)

    抖音怎么用一个手机号注册两个号(抖音怎么用一个身份证认证多个号)

  • 苹果xriOS13.5手机步数不准怎么办(苹果xrios13.6)

    苹果xriOS13.5手机步数不准怎么办(苹果xrios13.6)

  • vivo手机怎么设置双卡模式(vivo手机怎么设置呼叫转移)

    vivo手机怎么设置双卡模式(vivo手机怎么设置呼叫转移)

  • word转pdf页眉变了(word2007转pdf页眉丢失)

    word转pdf页眉变了(word2007转pdf页眉丢失)

  • 苹果7p满电放一晚上没电了(苹果7plus电池充满一下子就没电了)

    苹果7p满电放一晚上没电了(苹果7plus电池充满一下子就没电了)

  • 小米10pro充电速度(小米10pro pd充电速度)

    小米10pro充电速度(小米10pro pd充电速度)

  • 耳机自动播放音乐怎么回事(耳机自动播放音乐怎么解决)

    耳机自动播放音乐怎么回事(耳机自动播放音乐怎么解决)

  • 手机关联启动什么意思(手机关联启动怎么设置在哪)

    手机关联启动什么意思(手机关联启动怎么设置在哪)

  • mate20屏幕刷新率(mate20屏幕刷新率怎么调)

    mate20屏幕刷新率(mate20屏幕刷新率怎么调)

  • image是什么文件夹(image是什么文件可以删除吗)

    image是什么文件夹(image是什么文件可以删除吗)

  • 支付宝有没有电脑版(支付宝有没有电脑app)

    支付宝有没有电脑版(支付宝有没有电脑app)

  • 小米9照片删除怎么还原(小米9照片删除在哪里)

    小米9照片删除怎么还原(小米9照片删除在哪里)

  • 苹果怎么将号码拉入黑名单(苹果怎么将号码设置黑名单)

    苹果怎么将号码拉入黑名单(苹果怎么将号码设置黑名单)

  • 抖音如何上传完整视频(抖音如何上传完整歌曲)

    抖音如何上传完整视频(抖音如何上传完整歌曲)

  • 蓝牙音响怎么屏蔽微信语音(蓝牙音响怎么屏蔽信号)

    蓝牙音响怎么屏蔽微信语音(蓝牙音响怎么屏蔽信号)

  • windows to go传统模式怎么弄(win go to win10)

    windows to go传统模式怎么弄(win go to win10)

  • ios13什么时候出北京时间(ios13大概什么时候出)

    ios13什么时候出北京时间(ios13大概什么时候出)

  • 发圈文字折叠了怎么办(发朋友圈字折叠)

    发圈文字折叠了怎么办(发朋友圈字折叠)

  • 怎么恢复手机电话图标(怎么恢复手机电池健康)

    怎么恢复手机电话图标(怎么恢复手机电池健康)

  • 50寸小米4a和4c测评(小米4a50寸怎么样)

    50寸小米4a和4c测评(小米4a50寸怎么样)

  • 快手广告怎么投放(快手上如何投放广告)

    快手广告怎么投放(快手上如何投放广告)

  • 荣耀20的指纹解锁在哪里(荣耀20指纹解锁坏了)

    荣耀20的指纹解锁在哪里(荣耀20指纹解锁坏了)

  • 抖音合拍对方会知道吗(抖音合拍对方会显示吗)

    抖音合拍对方会知道吗(抖音合拍对方会显示吗)

  • 激光打标图片怎么做(激光打标图片怎么打)

    激光打标图片怎么做(激光打标图片怎么打)

  • 5g牌照是什么(5g车牌号)

    5g牌照是什么(5g车牌号)

  • cpu游戏性能天梯图最新版2022(cpu游戏性能天梯图2023)

    cpu游戏性能天梯图最新版2022(cpu游戏性能天梯图2023)

  • YunTable开发日记(16)教程(0.9版RC)(开发日志模板)

    YunTable开发日记(16)教程(0.9版RC)(开发日志模板)

  • 工业企业应缴纳的税金有哪些
  • 自来水适用的税率是多少
  • 怎么恢复自然人个人信息
  • 人工费用分配表分配率
  • 没经营的个体户营业执照怎么注销
  • 车辆保险费专用发票图片
  • 如何进行银行存款的实质性程序
  • 电算化怎么操作
  • 建筑挂靠企业账务处理
  • 股权转让涉及房屋产权变更怎么办
  • 会计凭证的内容中应包括会计分录
  • 产品在海关发生质量问题
  • 企业采购材料没有发票是要交企业所得税吗
  • 季度企业所得税计算方法举例
  • 年终奖和工资个人所得税计算器
  • 人力资源顾问公司有什么岗位
  • 资产负债表在途物资属于存货吗
  • 向境外支付违约金要代扣税吗
  • 金融衍生工具的特点不包括
  • 维修材料费主要包括
  • 未开票收入纳税
  • 公司收回货款会计分录
  • 电脑装系统分区出现错误
  • 系统之家的系统免费吗
  • linux下4种kill某个用户所有进程的方法
  • 员工福利费会计处理
  • 跨年收到退回增值税税款的账务处理
  • php配置文件的名字是
  • 商业企业收取的服务费
  • uniapp引入bootstrap
  • 采购过程中发生材料毁损,由保险公司赔偿的部分
  • yarn install报错
  • 论文可查
  • 前端进阶教程
  • PHP Ajax JavaScript Json获取天气信息实现代码
  • python猜数字1到1000代码
  • 凭样品销售
  • mybatis拦截器执行顺序
  • PostgreSQL教程(三):表的继承和分区表详解
  • 收回以前年度多发奖金分录
  • 四联收据每一联用途
  • 财务会计制度及核算软件备案有效期
  • 企业未分配利润为负数什么原因
  • 什么叫做增值税的新增价值呢
  • 工程完工后的质保金怎么入账
  • 无形资产当月减少当月计提吗
  • 代扣代缴增值税怎么做账
  • 出口海运费222011
  • 长期股权投资会计实训心得
  • 金融服务银行
  • 资产类科目一般是什么
  • 采购成品油会计分录
  • 收付实现制下主营业务成本怎么算
  • 会计利润和税务利润的差异是什么
  • 预付账款怎么做账务处理
  • 加大固定资产投资
  • 目前用到的两个字符
  • Gene6 FTP在windows 2008上面破解后无法启动解决方法
  • ubuntu ifdown
  • win7安装sqlserver2000没反应
  • xp默认详细信息
  • 操作系统安装日期查看
  • win7怎么创建新盘
  • win10系统关闭防火墙服务
  • 红帽linux6.0安装教程
  • 电脑操作系统win8
  • neoCopy.exe - neoCopy是什么进程 有什么用
  • linux检查是否存在vxlan模块
  • js移动端布局
  • 点击滑块是什么意思
  • opengl怎么用
  • 基于jquery的框架有哪些
  • python中的类怎么理解
  • jquery中ajax跨域方法实例分析
  • nodejs 动态网页
  • dom使用
  • RadioGroup+Fragment实现底部菜单栏
  • python文件的读操作方法
  • 标箭头的手机软件
  • 保障性住房是否可以买卖
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设