【Vue】自定义指令

news2025/1/30 5:27:59

自定义指令

自定义指令就是自己定义的指令,是对 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.coloradmin.cn/o/1239652.html

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

相关文章

VPS配置了swap没发挥作用怎么办

1 swap配置了但没用上 我的服务器内存是2G&#xff0c;装多一点东西就不够用&#xff0c;于是我给他分配了2G的swap&#xff0c;等了几小时&#xff0c;swap还是一点都没有使用 Linux中Swap&#xff08;即&#xff1a;交换分区&#xff09;&#xff0c;类似于Windows的虚拟内存…

IT变更管理实现服务台高效协同

在当今数字化时代&#xff0c;IT变更管理是IT管理员在服务台中必须面对的重要挑战之一。随着技术的不断发展和市场的快速变化&#xff0c;管理员需要定期进行IT系统和流程的变更&#xff0c;在确保业务稳定性的同时还需提高效率和准确率。 1、全方位的变更计划 IT中应该有一个全…

如何使用YOLOv8代码框架中的RT-DETR

1. RT-DETR RT-DETR是由由此&#xff0c;百度推出了——RT-DETR (Real-Time DEtection TRansformer) &#xff0c;一种基于 DETR 架构的实时端到端检测器&#xff0c;其在速度和精度上取得了 SOTA 性能。 RT-DETR开源的代码在百度自己的飞桨paddlepaddle上&#xff0c;因此非…

Confluence 未授权漏洞分析(CVE-2023-22515)

0x01 漏洞描述 Confluence 是由 Atlassian 开发的企业级协作软件。2023年10月&#xff0c;Atlassian 官方披露 CVE-2023-22515 Atlassian Confluence Data Center & Server 权限提升漏洞。攻击者可构造恶意请求创建管理员&#xff0c;从而登录系统&#xff0c;造成敏感信息…

BUUCTF [SWPU2019]神奇的二维码 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 密文&#xff1a; 下载附件&#xff0c;得到一个.png图片。 解题思路&#xff1a; 1、使用QR research扫一下&#xff0c;得到“swpuctf{flag_is_not_here}”的提示。 2、放到0…

HTML新手入门笔记整理:HTML基本介绍

网页 静态页面 仅可供用户浏览&#xff0c;不具备与服务器交互的功能。 动态页面 可供用户浏览&#xff0c;具备与服务器交互的功能。 HTML HTML&#xff0c;全称HyperText Markup Language&#xff08;超文本标记语言&#xff09;,是一种用于创建网页的标准标记语言。用于…

经典双指针算法试题(二)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、有效三角形的个数1、题目讲解2、讲解算法原理3、代码实现 二、查找总价格为目标值的两个商…

MCU 的 TOP 15 图形GUI库:选择最适合你的图形用户界面(一)

在嵌入式系统开发中&#xff0c;选择一个合适的图形用户界面&#xff08;GUI&#xff09;库是至关重要的。在屏幕上显示的时候&#xff0c;使用现成的图形库&#xff0c;这样开发人员就不需要弄清楚底层任务&#xff0c;例如如何绘制像素、线条、形状&#xff0c;如果再高级一点…

栈和队列java实现

栈和队列都是动态集合&#xff0c;且在其上进行DELETE操作所移除的元素是预先设定的。在栈中&#xff0c;被删除的是最近插入的元素&#xff1a;栈实现的是一种后进先出&#xff08;last-in&#xff0c;first-out&#xff0c;LIFO&#xff09; 策略。在队列中&#xff0c;被删去…

问鼎web服务

华子目录 www简介常见Web服务程序介绍&#xff1a;服务器主机主要数据浏览器网址及http介绍urlhttp请求方法 http协议请求的工作流程www服务器类型静态网站动态网站 快速安装Apache安装准备工作httpd所需目录主配置文件 实验操作 www简介 Web网络服务也叫www&#xff08;world…

K8S部署mongodb-sharded-cluster(7.0.2)副本分片

添加源 helm repo add bitnami https://charts.bitnami.com/bitnami指定版本拉取 helm pull --repo https://charts.bitnami.com/bitnami mongodb-sharded --version 7.0.5安装时选择SCRAM-SHA-1默认是SCRAM-SHA-256 helm install -n prod mymongodb mongodb-sharded --value…

优先级队列(priority_queue)

文章目录 优先级队列的定义定义&#xff1a;接口头文件优先队列和堆的关系使用&#xff1a;排序的规则容器 仿函数应用 队列存指针问题&#xff1a; 优先级队列的定义 定义&#xff1a; 黄色部分是仿函数 接口 头文件 这里不需要包含其他的头文件只需要使用队列的头文件就可以…

蓝桥杯每日一题2023.11.22

题目描述 题目分析 由题目知其每个品牌积分一定小于315故直接暴力枚举每个品牌如果符合要求直接输出即可 &#xff08;答案&#xff1a;150&#xff09; #include<bits/stdc.h> using namespace std; int main() {for(int i 1; i < 315; i ){for(int j 1; j <…

三、防火墙-源NAT

学习防火墙之前&#xff0c;对路由交换应要有一定的认识 源NAT基本原理1.1.NAT No-PAT1.2.NAPT1.3.出接口地址方式&#xff08;Easy IP&#xff09;1.4.Smart NAT1.5.三元组 NAT1.6.多出口场景下的源NAT 总结延伸 ——————————————————————————————…

python实现调和反距离空间插值法AIDW

1 简介 AIDW 主要是针对 IDW 的缺点进行了改进&#xff0c;考虑了样本点与预测点的位置&#xff0c;即方向和距离&#xff0c;具体见下图&#xff1a; 2 改进 IDW 公式&#xff1a; 从IDW算法可看出&#xff0c;插值点的估算值仅与插值样本距插值点的远近相关&#xff0c;并未…

基于鹈鹕算法优化概率神经网络PNN的分类预测 - 附代码

基于鹈鹕算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于鹈鹕算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于鹈鹕优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

【LeetCode刷题】--40.组合总和II

40.组合总和II 本题详解&#xff1a;回溯算法 class Solution {public List<List<Integer>> combinationSum2(int[] candidates, int target) {int len candidates.length;List<List<Integer>> res new ArrayList<>();if (len 0) {return re…

基于python人脸性别年龄检测系统-深度学习项目

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介简介技术组成1. OpenCV2. Dlib3. TensorFlow 和 Keras 功能流程 二、功能三、系统四. 总结 一项目简介 # Python 人脸性别年龄检测系统介绍 简介 该系统基…

Windows、VMware问题集合

Windows、VMware问题集合 一. Windows11安装VMware17提升虚拟机性能1. 桌面右击图标点击属性——>兼容性&#xff0c;找到“以管理员身份运行此程序”勾选&#xff0c;最后点击确定即可。2. 关闭win11的内核隔离功能。 二. VMware虚拟机报错&#xff08;虚拟化性能计数器需要…

UML建模图文详解教程——类图

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;《UML面向对象分析、建模与设计&#xff08;第2版&#xff09;》吕云翔&#xff0c;赵天宇 著 类图概述 类图用来描述系统内各种实体的类型以及不同…