当前位置： 首页 > news >正文

vue2-vue自定义指令

news 来源：原创 2025/5/9 14:52:27

文章目录

  • vue2-vue自定义指令
  • 1. 什么是指令
    • 2. 自定义指令
      • 2.1 全局注册
      • 2.2 局部注册
    • 3. 自定义指令的钩子函数
    • 4. 钩子函数的参数
    • 4. 用例

vue2-vue自定义指令

1. 什么是指令

  • 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们平时使用的v-开头的，都是指令，不同的指令完成不同的功能
  • 比如v-xxx，会实例化一个指令，不接受参数
  • v-xx=‘value’，将值传到指令中
  • v-xx=“‘string’”,将字符串传入到指令中，v-html=“‘'"
  • v-xx:arg=“value”，v-bind：class=“className”
  • v-xx:arg.modifier=“value”，使用修饰符
  • 除了vue内置的指令，我们还可以自定义指令

2. 自定义指令

  • 自定义指令可以分为全局注册和局部注册

2.1 全局注册

  • 全局注册主要通过Vue.directive(‘directiveName’,option)来进行注册
Vue.directive('focus',{insert:function (el){el.focus()}
})
<input v-focus/>

2.2 局部注册

  • 局部注册在组件的options选项中通过directives属性进行配置
directives:{focus:{inserted:function (el){el.focus()}}
}
<input v-focus/>

3. 自定义指令的钩子函数

  • 自定义指令也像组件那样存在钩子函数
  • bind，只调用一次，在指令第一次绑定到元素时调用
  • unbind，只调用一次，在指令与元素解绑时调用
  • inserted，被绑定元素插入父节点是调用，仅保证父节点存在，不保证插入文档
  • update，所在徐建的VNode更新时调用，但是可能发生在其子VNode更新之前
  • componentUpdate,指令所在组件的VNode以及其子VNode全部更新后调用

4. 钩子函数的参数

  • 所有的钩子函数都有以下4个参数
  • el，指令所绑定的元素，可以用来直接操作ODM
  • binding：一个对象，包含以下属性
    • name：指令名
    • value，指令绑定的值
    • oldValue，指令绑定的前一个值
    • expression，指令绑定的字符串表达式
    • arg，传给指令的参数
    • modifiers，一个包含修饰符的对象
  • vnode，Vue编译生成的虚拟节点
  • oldNode，上一个虚拟节点，仅在update和componentUpdate钩子函数中可用

4. 用例

<div v-myDirective="{name:'tom',age:12}"></div>
<script>Vue.directive('myDirective',function (el,binding){console.log(binding.value.name)//tom})
</script>

相关文章：

vue2-vue自定义指令

文章目录 vue2-vue自定义指令1. 什么是指令2. 自定义指令2.1 全局注册2.2 局部注册 3. 自定义指令的钩子函数4. 钩子函数的参数4. 用例 vue2-vue自定义指令 1. 什么是指令 在vue中提供了一套为数据驱动视图更为方便的操作&#xff0c;这些操作被称为指令系统我们平时使用的v-…...

编程日记 2025/5/9 14:52:27

[250202] DocumentDB 开源发布：基于 PostgreSQL 的文档数据库新选择 | Jekyll 4.4.0 发布

目录 DocumentDB 开源发布&#xff1a;基于 PostgreSQL 的文档数据库新选择DocumentDB 的使命DocumentDB 的架构 Jekyll 4.4.0 版本发布&#x1f195; 新特性与改进 DocumentDB 开源发布&#xff1a;基于 PostgreSQL 的文档数据库新选择 微软近日宣布开源 DocumentDB&#xff…...

编程日记 2025/5/9 9:44:24

matplotlib绘制三维曲面图时遇到的问题及解决方法

在科学计算和数据可视化中&#xff0c;三维曲面图是非常有用的工具&#xff0c;可以直观地展示数据的三维分布和关系。Matplotlib是Python中广泛使用的数据可视化库之一&#xff0c;提供了强大的三维绘图功能。然而&#xff0c;在实际使用过程中&#xff0c;用户可能会遇到各种…...

编程日记 2025/5/9 14:16:20

【数据结构】(4) 线性表 List

一、什么是线性表 线性表就是 n 个相同类型元素的有限序列&#xff0c;每一个元素只有一个前驱和后继&#xff08;除了第一个和最后一个元素&#xff09;。 数据结构中&#xff0c;常见的线性表有&#xff1a;顺序表、链表、栈、队列。 二、什么是 List List 是 Java 中的线性…...

编程日记 2025/5/7 9:57:30

简单React项目从0到1

文章目录 项目搭建基于CRA创建项目调整项目目录结构 使用scss预处理器组件库antd使用配置基础路由配置别名路径路径编译配置VsCode提示配置 基本结构搭建表单校验实现获取登录表单数据封装request工具模块使用Redux管理token安装Redux相关工具包配置Redux 实现登录逻辑token持久…...

编程日记 2025/5/6 7:36:13

IM 即时通讯系统-46-OpenIM 提供了专为开发者设计的开源即时通讯解决方案

IM 开源系列 IM 即时通讯系统-41-开源 野火IM 专注于即时通讯实时音视频技术&#xff0c;提供优质可控的IMRTC能力 IM 即时通讯系统-42-基于netty实现的IM服务端,提供客户端jar包,可集成自己的登录系统 IM 即时通讯系统-43-简单的仿QQ聊天安卓APP IM 即时通讯系统-44-仿QQ即…...

编程日记 2025/5/9 14:39:21

MFC 学习笔记目录

序章 MFC学习笔记专栏开篇语-CSDN博客 下载与安装 VS2010 下载与安装 VS2019...

编程日记 2025/5/9 13:53:34

一文讲解Java中的ArrayList和LinkedList

ArrayList和LinkedList有什么区别&#xff1f; ArrayList 是基于数组实现的&#xff0c;LinkedList 是基于链表实现的。 二者用途有什么不同&#xff1f; 多数情况下&#xff0c;ArrayList更利于查找&#xff0c;LinkedList更利于增删 由于 ArrayList 是基于数组实现的&#…...

编程日记 2025/5/9 14:44:30

【Linux系统】线程：线程的优点 / 缺点 / 超线程技术 / 异常 / 用途

1、线程的优点 创建和删除线程代价较小 创建一个新线程的代价要比创建一个新进程小得多&#xff0c;删除代价也小。这种说法主要基于以下几个方面&#xff1a; &#xff08;1&#xff09;资源共享 内存空间&#xff1a;每个进程都有自己独立的内存空间&#xff0c;包括代码段…...

编程日记 2025/5/9 14:22:32

HTML 复习

文章目录 路径问题标题标签段落标签换行标签列表标签<ol> 有序列表<ul> 无序标签标签嵌套 超链接标签多媒体标签<img> 图片标签<audio> 音频标签<video> 视频标签 表格标签<colspan> 跨行<rowspan> 跨列组合使用 表单标签基本表单标…...

编程日记 2025/5/5 2:43:34

网络爬虫学习：借助DeepSeek完善爬虫软件，增加停止任务功能

一、引言 我从24年11月份开始学习网络爬虫应用开发&#xff0c;经过2个来月的努力&#xff0c;终于完成了开发一款网络爬虫软件的学习目标。这几天对本次学习及应用开发进行一下回顾总结。前面已经发布了两篇日志&#xff1a; 网络爬虫学习&#xff1a;应用selenium从搜*狐搜…...

编程日记 2025/4/30 1:22:25

【数据结构】单向链表（真正的零基础）

放弃眼高手低&#xff0c;你真正投入学习&#xff0c;会因为找到一个新方法产生成就感&#xff0c;学习不仅是片面的记单词、学高数......只要是提升自己的过程&#xff0c;探索到了未知&#xff0c;就是学习。 目录 一.链表的理解 二.链表的分类&#xff08;重点理解&#xf…...

编程日记 2025/5/9 9:50:55

8. k8s二进制集群之Kubectl部署

创建kubectl证书请求文件生成admin证书文件复制admin证书到指定目录生成kubeconfig配置文件接下来完成kubectl配置文件的角色绑定【扩展】kubectl命令补全操作继续上一篇文章《k8s二进制集群之Kube ApiServer部署》下面介绍一下k8s中的命令行管理工具kubectl。 通过kubectl可以…...

编程日记 2025/5/9 13:51:50

115，【7】 攻防世界 web fileinclude

进入靶场 试着访问了几个文件&#xff0c;都没得到信息&#xff0c;f12看看源码 还真有 <?php // 检查是否开启了错误显示功能 // ini_get 函数用于获取 PHP 配置选项的值&#xff0c;这里检查 display_errors 选项是否开启 if( !ini_get(display_errors) ) {// 如果错误…...

编程日记 2025/5/9 13:39:51

RabbitMQ 从入门到精通：从工作模式到集群部署实战（二）

接上篇&#xff1a;《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;一&#xff09;》 链接 文章目录 4.安装RabbitMQ Messaging Topology Operator 裸金属环境部署RabbitMQ部署单实例部署集群 4.安装RabbitMQ Messaging Topology Operator 使用 cer…...

编程日记 2025/5/9 7:05:14

【MySQL】MySQL经典面试题深度解析

文章目录 一、MySQL与C的深度结合1.1 为什么C项目需要MySQL&#xff1f;1.2 典型应用场景 二、基础概念面试题精讲2.1 存储引擎对比2.2 索引原理 三、C专项面试题解析3.1 连接池实现3.2 预处理语句3.3 批量操作优化 四、高级应用面试题剖析4.1 事务隔离级别4.2 锁机制详解4.3 查…...

编程日记 2025/5/9 14:15:19

小程序-基础加强

前言 这一节把基础加强讲完 1. 导入需要用到的小程序项目 2. 初步安装和使用vant组件库 这里还可以扫描二维码 其中步骤四没什么用 右键选择最后一个 在开始之前&#xff0c;我们的项目根目录得有package.json 没有的话&#xff0c;我们就初始化一个 但是我们没有npm这个…...

编程日记 2025/5/9 13:48:24

vscode+CMake+Debug实现 及权限不足等诸多问题汇总

环境说明 有空再补充 直接贴两个json tasks.json {"version": "2.0.0","tasks": [{"label": "cmake","type": "shell","command": "cmake","args": ["../"…...

编程日记 2025/5/7 5:19:44

零基础Vue入门6——Vue router

本节重点&#xff1a; 路由定义路由跳转 前面几节学习的都是单页面的功能&#xff08;都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html&#xff09;&#xff0c;涉及到项目研发都是有很多页面的&#xff0c;这里就需要用到路由&#xff08;vue route…...

编程日记 2025/5/5 20:34:05

【疑海破局】一个注解引发的线上事故

【疑海破局】一个注解引发的线上事故 1、问题背景 在不久前一个阳光明媚的上午，我的思绪正在代码中游走、双手正在键盘上飞舞。突然，公司内部通讯工具上，我被拉进了一个临时工作群，只见群中产品、运营、运维、测试等关键人员全部严阵以待，我就知道大的可能要来了。果不其…...

编程日记 2025/5/2 21:49:02

C语言：函数栈帧的创建和销毁

目录 1.什么是函数栈帧2.理解函数栈帧能解决什么问题3.函数栈帧的创建和销毁的过程解析3.1 什么是栈3.2 认识相关寄存器和汇编指令3.3 解析函数栈帧的创建和销毁过程3.3.1 准备环境3.3.2 函数的调用堆栈3.3.3 转到反汇编3.3.4 函数栈帧的创建和销毁 1.什么是函数栈帧 在写C语言…...

编程日记 2025/5/5 1:28:00

IDEA启动项目慢问题处理

IDEA启动项目慢问题处理 一、问题现象二、问题排查排查点1&#xff1a;idea内存排查点2&#xff1a;应用内存排查点3&#xff1a;shorten command lineclasspath filejar manifest 排查点4&#xff1a;jstack排查 三、问题定位 一、问题现象 多模块工程&#xff0c;启动模块为…...

编程日记 2025/5/6 8:52:14

Denavit-Hartenberg DH MDH坐标系

Denavit-Hartenberg坐标系及其规则详解 6轴协作机器人的MDH模型详细图_6轴mdh-CSDN博客 N轴机械臂的MDH正向建模&#xff0c;及python算法_mdh建模-CSDN博客 运动学3-----正向运动学 | 鱼香ROS 机器人学&#xff1a;MDH建模 - 哆啦美 - 博客园 机械臂学习——标准DH法和改进MDH…...

编程日记 2025/5/5 23:14:58

Unity 快速入门 1 - 界面操作

本项目将快速介绍 Unity 6的基本操作和功能&#xff0c;下载附件的项目&#xff0c;解压到硬盘&#xff0c;例如 D:\Unity Projects\&#xff0c; 注意整个文件路径中只有英文、空格或数字&#xff0c;不要有中文或其他特殊符合。 1. 打开Unity Hub&#xff0c;点击右上角的 O…...

编程日记 2025/5/4 17:56:18

美国网络司令部军事网络指挥框架战略转型与挑战分析

文章目录 前言一、框架核心内容&#xff1a;从分散到集中&#xff0c;构建标准化作战体系二、指挥体系重构&#xff1a;权责明晰与集中化管控三、风险管理创新&#xff1a;从被动防御到主动备战四、对美军网络作战的影响总结 前言 2024年9月&#xff0c;美国网络司令部发布《国…...

编程日记 2025/5/5 15:05:06

9-收纳的知识

[ComponentOf(typeof(xxx))]组件描述&#xff0c;表示是哪个实体的组件 [EntitySystemOf(typeof(xxx))] 系统描述 [Event(SceneType.Demo)] 定义事件&#xff0c;在指定场景的指定事件发生后触发 [ChildOf(typeof(ComputersComponent))] 标明是谁的子实体 [ResponseType(na…...

编程日记 2025/5/8 10:28:32

Linux 压缩打包

Linux压缩打包 文章目录 Linux压缩打包压缩的意义和原理压缩的意义压缩的原理压缩与解压缩的好处压缩打包命令.zipzip 命令用法unzip 的用法.gzgzip 的用法gunzip 的用法.bz2bzip2 的用法bunzip2 的用法.xzxz 命令用法tar04-Linux压缩打包课后习题压缩的意义和原理 压缩的意义…...

编程日记 2025/5/9 9:44:52

排序算法--堆排序

堆排序是一种高效的排序算法&#xff0c;适合大规模数据排序&#xff0c;尤其适用于需要实时获取最大&#xff08;或最小&#xff09;值的场景。 // 交换两个元素的值 void swap(int* a, int* b) {int temp *a;*a *b;*b temp; }// 调整堆&#xff0c;使其满足堆的性质 void …...

编程日记 2025/5/5 17:12:07

51c视觉~CV~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/13241694 一、CV创建自定义图像滤镜 热图滤镜 这组滤镜提供了各种不同的艺术和风格化光学图像捕捉方法。例如&#xff0c;热滤镜会将图像转换为“热图”&#xff0c;而卡通滤镜则提供生动的图像&#xff0c;这些图像看起来…...

编程日记 2025/5/4 12:22:53

【数据结构】(6) LinkedList 链表

一、什么是链表 1、链表与顺序表对比 不同点LinkedListArrayList物理存储上不连续连续随机访问效率O(N)O(1&#xff09;插入、删除效率O(1)O(N) 3、链表的分类 链表根据结构分类&#xff0c;可分为单向/双向、无头结点/有头节点、非循环/循环链表&#xff0c;这三组每组各取…...

编程日记 2025/5/4 22:54:48

使用 Axios 获取用户数据并渲染——个人信息设置

目录 1. HTML 部分&#xff08;前端页面结构&#xff09; HTML 结构解析&#xff1a; 2. JavaScript 部分&#xff08;信息渲染逻辑&#xff09; JavaScript 解析&#xff1a; 3. 完整流程 4. 总结 5. 适用场景 本文将介绍如何通过 Axios 从服务器获取用户信息&#xff0…...

编程日记 2025/5/6 5:32:50

【hudi】基于hive2.1.1的编译hudi-1.0.0源码

hudi版本1.0.0 需要使用较低版本的hive&#xff0c;编译hudi只需要修改下类即可&#xff1a; org.apache.hudi.hadoop.hive.HoodieCombineHiveInputFormat 一、复制org.apache.hadoop.hive.common.StringInternUtils 找个hive2.3.9的源码包&#xff0c;创建包路径&#xff0c…...

编程日记 2025/5/4 12:38:05

物联网领域的MQTT协议，优势和应用场景

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为轻量级发布/订阅协议&#xff0c;凭借其低带宽消耗、低功耗与高扩展性&#xff0c;已成为物联网通信的事实标准。其核心优势包括&#xff1a;基于TCP/IP的异步通信机制、支持QoS&#xff08;服务质量&…...

编程日记 2025/5/7 1:47:29

MyBatis 调优指南：释放持久层性能潜力

MyBatis 作为一款优秀的持久层框架&#xff0c;以其灵活性和易用性深受开发者喜爱。然而&#xff0c;随着应用规模扩大和数据量增长&#xff0c;MyBatis 的性能问题也逐渐显现。本文将深入探讨 MyBatis 调优策略&#xff0c;帮助您释放持久层性能潜力。 一、 SQL 语句优化 避免…...

编程日记 2025/5/7 8:53:57

Unity扩展编辑器使用整理（一）

准备工作 在Unity工程中新建Editor文件夹存放编辑器脚本&#xff0c; Unity中其他的特殊文件夹可以参考官方文档链接&#xff0c;如下&#xff1a; Unity - 手册&#xff1a;保留文件夹名称参考 (unity3d.com) 一、菜单栏扩展 1.增加顶部菜单栏选项 使用MenuItem&#xff…...

编程日记 2025/5/8 17:19:53

注册中心不知选哪个？Zookeeper、Eureka、Nacos、Consul和Etcd 5种全方位剖析对比

本文给大家讲解 5 种常用的注册中心&#xff0c;对比其流程和原理&#xff0c;无论是面试还是技术选型&#xff0c;都非常有帮助。 对于注册中心&#xff0c;在写这篇文章前&#xff0c;我其实只对 ETCD 有比较深入的了解&#xff0c;但是对于 Zookeeper 和其他的注册中心了解甚…...

编程日记 2025/5/8 0:33:02

Windows下怎么安装FFFmpeg呢？

在Windows下使用Open-webui报错&#xff0c;说Couldnt find ffmpeg or avconv,解决open-webui报错Couldn‘t find ffmpeg or avconv-CSDN博客于是尝试解决问题&#xff0c;那么Windows下怎么安装FFFmpeg呢&#xff1f; 尝试了两种方法。 第一种方法pip安装&#xff08;失败&…...

编程日记 2025/5/7 10:37:17

CSS 基础：层叠、优先级与继承

CSS 基础&#xff1a;层叠、优先级与继承 一、层叠&#xff08;Cascade&#xff09;示例&#xff1a;层叠的顺序 二、优先级&#xff08;Specificity&#xff09;优先级规则示例&#xff1a;优先级的比较 三、继承&#xff08;Inheritance&#xff09;哪些属性会被继承&#xf…...

编程日记 2025/5/9 4:07:15

《翻转组件库之发布》

背景 继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后&#xff0c;组件库已经可以正常构建&#xff0c;那如何像elementUI等组件库那样&#xff0c;用npm安装&#xff0c;按照既定的用法使用即可呢&#xff1f;本篇便为你揭晓 资料相关 1、npm官方文档&#xff1a;…...

编程日记 2025/5/9 3:25:47

Spring Boot + Spring AI快速体验

Spring AI快速体验 1 什么是Spring AI 主要功能 2 快速开始 2.1 版本说明2.2 配置文件2.3 pom依赖 2.3.1 spring maven仓库2.3.2 核心依赖 2.4 定义ChatClient2.5 启动类2.6 测试 3 参考链接 1 什么是Spring AI Spring AI是Spring的一个子项目&#xff0c;是Spring专门面向于…...

编程日记 2025/5/7 5:41:33

windows linux常用基础命令

windows基础命令 cd …/ &#xff08;访问D盘 直接D: 进入目录cd…\baidudu) color 2 改变颜色 dir 浏览当前目录中有什么内容 例如 dir windows可以浏览windows中有什么文件 cls 清屏 cd windows 可以跳转到c盘目录的下面 cd…/可以返回到上一级目录 ./当前目录 cd \ 直…...

编程日记 2025/5/8 11:29:54

ZooKeeper单节点详细部署流程

ZooKeeper单节点详细部署流程 文章目录 ZooKeeper单节点详细部署流程 一.下载稳定版本**ZooKeeper**二进制安装包二.安装并启动**ZooKeeper**1.安装**ZooKeeper**2.配置并启动**ZooKeeper** ZooKeeper 版本与 JDK 兼容性3.检查启动状态4.配置环境变量 三.可视化工具管理**Zooke…...

编程日记 2025/5/5 17:26:03

【AI日记】25.02.06

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Backpack Prediction Challenge 读书 书名&#xff1a;理解公司&#xff1a;产权、激励与治理作者&#xff1a;张维迎下图感想&#xff1a;哲学家、思想家比如卢梭…...

编程日记 2025/5/9 13:07:23

税费学习之：附加税费

好的&#xff01;我将从 **税收本质、历史沿革、用途逻辑、企业影响** 四个维度综合分析&#xff0c;用项目管理中的实际场景说明为什么需要缴纳附加税费。 --- ### **一、附加税费的本质与构成** #### **1. 定义** 附加税费是 **以增值税、消费税为基数征收的附加税**&…...

编程日记 2025/5/1 4:19:56

数据库开发常识（10.6）——SQL性能判断标准及索引误区（1）

10.6. 数据库开发常识 作为一名专业数据库开发人员，不但需要掌握数据库开发相关的语法和功能实现，还要掌握专业数据库开发的常识。这样，才能在保量完成工作任务的同时，也保质的完成工作任务，避免了为应用的日后维护埋下性能和稳定性方面的隐患。可遗憾的是，现实中，很大…...

编程日记 2025/5/9 0:13:43

网络原理一＞数据链路层协议-＞以太网协议

目录 以太网协议的结构&#xff1a;类型&#xff1a;ARP请求应答报文&#xff1a;CRC&#xff1a;MTU: 为什么需要mac地址&#xff1a;mac地址和IP地址的区别&#xff1a; 以太网协议的结构&#xff1a; 以太网是数据链路层和物理层的主要协议 源IP&#xff0c;目的IP就不多说…...

编程日记 2025/5/8 4:28:31

Android 约束布局ConstraintLayout整体链式打包居中显示

Android 用约束布局ConstraintLayout实现将多个控件视作一个整体居中显示&#xff0c;使用 app:layout_constraintHorizontal_chainStyle"packed"实现 chain 除了链条方向有横向和竖向区分外&#xff0c; chain链条上的模式有 3种 spread - 元素将被展开&#…...

编程日记 2025/5/9 13:35:13

云计算行业分析

云计算作为数字经济的核心基础设施&#xff0c;未来十年将持续重塑全球科技格局&#xff0c;并渗透到几乎所有行业的数字化转型中。 一、云计算的发展潜力 1. 技术融合驱动爆发式创新 AI与云计算的深度耦合 - **智能云服务**&#xff1a;云厂商将提供预训练模型、自动化ML工…...

编程日记 2025/4/14 13:16:18

深入浅出DeepSeek LLM 以长远主义拓展开源语言模型

深入浅出地讲解DeepSeek LLM 以长远主义拓展开源语言模型 &#x1f31f; 1. 什么是 DeepSeek LLM&#xff1f; 大家想象一下&#xff0c;你在游戏里要打造一个超级英雄角色&#xff0c;选择最强的装备、技能点和升级策略。那么&#xff0c;DeepSeek LLM 就是 AI 界的“超级英雄…...

编程日记 2025/4/29 17:16:43

用Python获取股票数据并实现未来收盘价的预测

获取数据 先用下面这段代码获取上证指数的历史数据&#xff0c;得到的csv文件数据&#xff0c;为后面训练模型用的 import akshare as ak import pandas as pd# 获取上证指数历史数据 df ak.stock_zh_index_daily(symbol"sh000001")# 将数据保存到本地CSV文件 df.…...

编程日记 2025/4/24 5:46:28