【Vue】自定义指令

自定义指令

自定义指令就是自己定义的指令,是对 DOM 元素进行底层操作封装 ,程序化地控制 DOM,拓展额外的功能

全局定义

Vue.directive(指令名字, definition)

  • 指令名:不包括v-前缀,使用时候包括v-,v-指令名
  • definition: 对象,包含指令逻辑
// definition 就代表下面的函数,
Vue.directive('focus', function(el, binding) {// el 是绑定的 DOM 元素
})

局部定义

new Vue({directives: {'focus': {}}
})directives: {
// 直接写成函数形式,部分细节问题会处理不了focus(el, binding) {}  
}

指令definition对象可以访问以下参数:

  • el: 指令绑定的DOM元素,可以直接操作
  • binding: 对象,包含指令信息
    • name: 指令名
    • value: 指令绑定的值
    • expression: 绑定表达式字符串
    • arg: 参数
    • modifiers: 修饰符
  • vnode: Vue编译的虚拟节点
  • oldVnode: 之前的虚拟节点

示例1

创建一个自定义指令

 <p v-color>鼠标悬停我,我会变色!</p>

在这里,v-color 就是我们的自定义指令它的名字是由我们来决定的,这个名字后面我们会用到

创建自定义指令的逻辑

<script>directives: {// 写成对象形式,可以定义更多函数color: {bind(el,binding) {console.log(el)console.log(binding)el.addEventListener('mouseover', () => {el.style.color = 'red'; // 鼠标悬停时变红色});el.addEventListener('mouseout', () => {el.style.color = ''; // 鼠标移出恢复原色});}}
}
</script>

bind 钩子函数和其他一些钩子函数中,el 是HTMLElement真实DOM元素一个必传参数,表示绑定了指令的 DOM 元素我们可以通过操作 el 来修改元素的样式、属性等

binding 是一个包含了指令相关信息的对象

我们告诉Vue当使用 v-color 指令时,应该执行的逻辑是:当鼠标悬停在元素上时,把文字变成红色;当鼠标移出时,恢复原来的颜色

我们已经在模板中使用了自定义指令 v--color,Vue会自动找到这个指令,并且执行我们之前定义的逻辑

鼠标悬停变色

el就代表绑定的元素,这里绑定的是h1

image-20230827183910809

value是什么?

当我给v-color制定值的时候,它就出现了,所以binding.value就是我们绑定的value

image-20230827184646143

image-20230827184604525

image-20230827185002751

示例2

<button @click="n++">点我n+1</button>
// 如果指令名有多个字母组成,要求使用烤肉串方式,如:v-focus-bind,相应的key应该加上引号
<input type="text" v-fbind:value="n">directives: {//函数是在 1.指令第一次绑定到元素时触发2.指令所在的模板被重新解析时触发// fbind(element,binding){// },// 写成对象形式,对象中可以定义更多函数,也可以写更多细节fbind:{//指令与元素成功绑定时,一上来立即会被调用,和函数形式调用时机一样fbind(){}bind(el,binding){el.value = binding.value},//指令所在元素被插入页面时inserted(el,binding){el.focus()},//指令所在的模板被重新解析时update(el,binding){el.value = binding.value}}}

全局形式

 Vue.directive('fbind',{bind(element,binding){element.value = binding.value},inserted(element,binding){element.focus()},update(element,binding){element.value = binding.value}

image-20230827195833643

定义成函数形式,相当于对象中的bind和update,没有inserted的简写,如需要更多细节操作可以定义对象形式

拓展钩子函数

Vue 自定义指令的常见钩子函数包括:

  • bind: 指令第一次绑定到元素时触发
  • inserted: 元素被插入到父元素时触发
  • update: 指令所在的模板被重新解析时触发
  • componentUpdated: 组件更新完成时触发
  • unbind: 指令与元素解绑时触发

这些钩子函数名称是 Vue 所识别的,如果我们在自定义指令中使用这些名称,Vue 就会在相应的时机调用我们的指令逻辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/160497.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CUTLASS 1.3.3中的 Volta884_h884gemm

CUTLASS 是 CUDA C 模板抽象的集合&#xff0c;用于在 CUDA 内的所有级别和规模上实现高性能矩阵-矩阵乘法 (GEMM) 和相关计算。它采用了类似于 cuBLAS 和 cuDNN 中实现的分层分解和数据移动策略。 CUTLASS 最新版本为3.3&#xff0c;相比1.3.3变动较大。然而重温一下1.3.3仍然…

生产问题 Recv-Q101

生产上服务端口 Recv-Q101 新请求到服务器的失败&#xff0c;幸好及时发现&#xff0c;通过重启服务之后得到解决&#xff0c;具体原因等待排查 目前觉得的原因是&#xff1a;某些请求暂用时间比较久

Linux超简单部署个人博客

1 安装halo 1.1 切换到超级用户 sudo -i 1.2 新建halo文件夹 mkdir ~/halo && cd ~/halo 1.3 编辑docker-compose.yml文件 vim ~/halo/docker-compose.yml 英文输入法下&#xff0c;按 i version: "3"services:halo:image: halohub/halo:2.10container_…

2017年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2017 级考研管理类联考数学真题解析一、问题求解&#xff08;本大题共 5 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。真题&#xff08;2017-…

Python 提高篇学习笔记(一):深拷贝和浅拷贝

文章目录 一、什么是对象的引用二、深拷贝和浅拷贝2.1 浅拷贝(Shallow Copy)2.2 深拷贝(Deep Copy)2.3 copy.copy和copy.deepcopy的区别 一、什么是对象的引用 在 Python 中&#xff0c;对象的引用是指变量指向内存中某个对象的地址或标识符。当你创建一个新的对象(比如一个整…

[技术杂谈]计算机系统硬件类名称

在各种编程语言都可以见到利用WMI查询计算机硬件信息&#xff0c;因此知道有哪些计算机硬件名称非常有必要&#xff0c;下面列举了所有计算机硬件名称可以查询。 本文内容 冷却设备类输入设备类大容量存储类主板、控制器和端口类 显示另外 6 个 计算机系统硬件类别将表示硬…

git修改远程分支名称

先拉取old_branch最新代码到本地 git checkout old_branchgit pull origin old_branch本地修改后并推送 git branch -m old_branch new_branch # 修改分支名称git push --delete origin old_branch # 删除在远程的老分支推送新分支 git push origin new_branch本地分支与远…

除自身以外数组的乘积[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数数组nums&#xff0c;返回数组answer&#xff0c;其中answer[i]等于nums中除nums[i]之外其余各元素的乘积。题目数据保证数组nums之中任意元素的全部前缀元素和后缀的乘积都在32位整数范围内。请不要使用除法&#xff0…

【Qt开发流程】之富文本处理

描述 Scribe框架提供了一组类&#xff0c;用于读取和操作结构化的富文本文档。与Qt中以前的富文本支持不同&#xff0c;新的类集中在QTextDocument类上&#xff0c;而不是原始文本信息。这使开发者能够创建和修改结构化的富文本文档&#xff0c;而不必准备中间标记格式的内容。…

【数据结构】A : A DS图_传递信息

A : A DS图_传递信息 Description 小明在和他的小伙伴们玩传消息游戏&#xff0c;游戏规则如下&#xff1a; 有n名玩家&#xff0c;所有玩家编号分别为0~n-1&#xff0c;其中小明编号为0&#xff1b;每个玩家都有固定的若干个可传信息的其他玩家(也可能没有)。传消息的关系是…

busybox制作根文件系统2

上篇内容使用busybox制作好了根文件系统&#xff0c;接下来需要进行一些测试和功能的完善&#xff01; 根文件系统的测试 测试根文件系统的时候不是直接烧写到EMMC里面&#xff0c;这样测试效率太低了&#xff0c;Ubuntu的rootfs目录已经保存了根文件系统&#xff0c;只需要在…

向量数据库,展望AGI时代

无论是向量数据库&#xff0c;还是大模型&#xff0c;归根结底&#xff0c;大家在追捧它时的心态&#xff0c;焦虑大于需求。 向量数据库的热潮&#xff0c;在一定程度上“外化”了人们的焦虑。 但这并不能否定向量数据库的实际价值&#xff0c;甚至更长远来看&#xff0c;向…

【C++】linux下的gdb程序调试

目录 【C】Linux 下的 GDB 程序调试1. 安装 GDB2. 编译程序3. 启动 GDB4. 设置断点5. 执行程序6. 调试命令7. 调试崩溃8. 结束调试 【C】Linux 下的 GDB 程序调试 在开发 C 程序时&#xff0c;出现 bug 是常见的。调试是找出程序错误的关键步骤之一。在 Linux 环境下&#xff…

RedisTemplate使用详解

RedisTemplate介绍StringRedisTemplate介绍RedisConnectionFactory介绍RedisConnectionFactory源码解析 RedisOperations介绍RedisOperations源码解析 RedisTemplate使用连接池配置RedisTemplate连接池连接池配置 RedisTemplate应用场景RedisTemplate主要特点RedisTemplate使用…

redis运维(十六) 有序集合

一 有序集合 把握一点&#xff1a; 各种redis 命令都提供各种语言对应的API 接口,后续API是关键 ① 概念 1、sorted set --> 有序集合2、redis有序集合也是集合类型的一部分&#xff0c;所以它保留了集合中元素不能重复的特性3、但是不同的是,有序集合给每个元素多设置…

什么是数字孪生?

数字孪生是指通过数字化技术手段&#xff0c;将现实世界中的实体物理系统或过程与其数字化模型相连接&#xff0c;实现实体物理系统或过程的虚拟仿真、监测、预测和优化等功能的一种技术。数字孪生技术可以将物理系统的运行状态、性能参数、故障信息等实时反馈到数字模型中&…

转型做视频了,博客就是稿子,继续坚持写博客,同时发布视频,能写博客说明思路清晰了,能再讲明白,理解就更透彻了,紧跟上时代发展。

1&#xff0c;今天特别记录下&#xff0c;B站给开通了《合集》功能 最近使用视频制作了几个视频。播放量还不错&#xff0c;最好的已经到了 2.6K了。 然后粉丝也涨到了 200个。 添加链接描述 紧跟时代&#xff1a;从写博客到录视频&#xff0c;粉丝大涨&#xff0c;突破200个&…

vue开发一、在Vue中引入ElementUI二、在Vue中使用阿里图标库

目录 一、在Vue中引入ElementUI1. 安装ElementUI2. 引入ElementUI3. 使用ElementUI组件 二、在Vue中使用阿里图标库1. 在阿里图标库中选择图标2. 下载图标3. 引入图标4. 使用图标 总结 一、在Vue中引入ElementUI ElementUI是一种基于Vue的第三方UI库&#xff0c;提供了许多常用…

接口自动化测试 —— 工具、请求与响应

一、工具&#xff1a; 1.工具介绍 postman &#xff1a;很主流的API测试工具&#xff0c;也是工作里面使用最广泛的研发工具。 JMeter&#xff1a; ApiPost&#xff1a; 2.安装postman&#xff1a; 安装好直接打开&#xff0c;不用注册。 二、通信模式&#xff1a; 1、…

【Java 进阶篇】从Java对象到JSON:Jackson的魔法之旅

在现代的软件开发中&#xff0c;处理数据的能力是至关重要的。而当我们谈及数据格式时&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;通常是首选。为了在Java中轻松地将对象转换为JSON&#xff0c;我们需要一种强大而灵活的工具。这时&#xff0c;Jackso…