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

自定义指令基础

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)
选项式API_自定义指令

<template><h3>自定义指令</h3><p v-author>文本信息</p>
</template>
<script>
export default {directives:{author:{mounted(element){element.innerHTML = element.innerHTML + "-itbaizhan"}}}
}
</script>

组合式API_自定义指令

<template><h3>自定义指令</h3><p v-author>文本信息</p>
</template>
<script setup>
const vAuthor = {mounted:(element) =>{element.innerHTML = element.innerHTML + "-itbaizhan"}
}
</script>

全局与局部自定义指令

自定义指令是区分全局和局部注册,在全局注册,可以在任意组件中使用,局部注册,只在当前组件中使用

局部自定义指令

<template><h3>自定义指令</h3><p v-blue>蓝色效果</p>
</template>
<script>
export default {directives:{blue:{mounted(element){element.style.color = "blue"}}}
}
</script>

全局自定义指令

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.directive("red",{mounted(element){element.style.color = 'red'}
})app.mount('#app')

自定义指令钩子函数

自定义指令有很多钩子函数,我们可以理解为是自定义指令的生命周期函数,在不同的情况下会自动调用
钩子函数

<template><h3>自定义指令</h3><p v-red v-if="flag">{{ message }}</p><button @click="updateHandler">修改数据</button><button @click="delHandler">删除元素</button>
</template>
<script setup>
import { ref } from "vue"
const message = ref("红色效果")
const flag = ref(true)
function updateHandler(){message.value = "修改的红色效果"
}
function delHandler(){flag.value = false
}
const vRed = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {console.log("created");},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {console.log("beforeMount");},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {console.log("mounted");},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {console.log("beforeUpdate");},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {console.log("updated");},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {console.log("beforeUnmount");},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {console.log("unmounted");}
}
</script>

自定义指令钩子函数参数

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

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 钩子中可用。

模拟v-show指令

<template><h3>自定义指令</h3><p v-myShow="flag">{{ message }}</p><button @click="updateHandler">显隐Toggle</button>
</template>
<script setup>
import { ref } from "vue"
const message = ref("模拟v-show指令")
const flag = ref(true)
function updateHandler(){flag.value = flag.value === true ? flag.value=false : flag.value = true
}
const vMyShow = {updated(el, binding) {binding.value === true ? el.style.display='block' : el.style.display='none'}
}
</script>

相关文章:

自定义指令基础

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外&#xff0c;Vue 还允许你注册自定义的指令 (Custom Directives) 选项式API_自定义指令 <template><h3>自定义指令</h3><p v-author>文本信息</p> </template> <script> e…...

​软考-高级-系统架构设计师教程(清华第2版)【第5章 软件工程基础知识(190~233)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第5章 软件工程基础知识&#xff08;190~233&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图...

Oneid方案

一、前文 用户画像的前提是标识出用户&#xff0c;存在以下场景&#xff1a;不同业务系统对同一个人的标识&#xff0c;匿名用户行为的行为归因&#xff1b;本文提供多种解决方案&#xff0c;提供大家思考。 二、方案矩阵 三、其他 相关连接&#xff1a; 如何通过图算法能力获…...

【超好用的工具库】hutool-all工具库的基本使用

简介&#xff08;可不看&#xff09;&#xff1a; hutool-all是一个Java工具库&#xff0c;提供了许多实用的工具类和方法&#xff0c;用于简化Java开发过程中的常见任务。它包含了各种模块&#xff0c;涵盖了字符串操作、日期时间处理、加密解密、文件操作、网络通信、图片处…...

趣学python编程 (一、计算机基础知识科普)

未来是高度科技化和智能化的时代。过去不识字的叫“文盲”&#xff0c;如今不懂点计算机知识&#xff0c;则可能是新时代的“文盲”。不论从事什么行业&#xff0c;了解下计算机和编程都是有益的。Python 连续多年占据最受欢迎的编程语言榜首&#xff0c;未来Python有机会成为像…...

亚马逊云科技云存储服务指南

文章作者&#xff1a;Libai 高效的云存储服务对于现代软件开发中的数据管理至关重要。亚马逊云科技云存储服务提供了强大的工具&#xff0c;可以简化工作流程并增强数据管理能力。 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开发案例、技术专栏…...

随机链表的复制

文章目录 &#x1f349;前言&#x1f349;题目&#x1f349;分析&#x1f349;思路一&#xff1a;暴力解法&#x1f349;思路二&#xff1a;很绝的办法 &#x1f349;前言 果然&#xff0c;力扣的简单题不一定简单&#xff0c;但是中等和较难的题一定很麻烦。 这道题相当综合&…...

树莓派4b编译FFmpeg支持硬件编解码

ffmpeg h264_omx解码器充分发挥树莓派gpu性能 准备 树莓派4b ,64位系统 修改树莓派的启动设置文件(/boot/config.txt)进行如下的调整: gpu_mem=256 framebuffer_depth=16安装依赖 常规依赖: sudo apt update sudo apt upgrade sudo apt -y install autoconf automake …...

开启CentOS/Debian自带的TCP BBR加速

BBR 是什么我就不多做介绍了。如果系统自带内核高于4.9 则默认已包含 BBR。 操作方法&#xff1a; 1、使用 root 权限运行下面代码 uname -r //内核版本高于 4.9 就行。2、开启BBR echo "net.core.default_qdiscfq" >> /etc/sysctl.conf echo "net.ip…...

视频推拉流EasyDSS直播点播平台获取指定时间快照的实现方法

视频推拉流直播点播系统EasyDSS平台&#xff0c;可提供流畅的视频直播、点播、视频推拉流、转码、管理、分发、录像、检索、时移回看等功能&#xff0c;可兼容多操作系统&#xff0c;在直播点播领域具有广泛的场景应用。为了便于用户集成、调用与二次开发。 今天我们来介绍下在…...

CSS---关于font文本属性设置样式总结

目录 1、color属性 2、font-size属性 3、font-weight属性 4、font-family属性 5、text-align属性 6、line-height属性 7、text-indent属性 8、letter-spacing属性 9、word-spacing属性 10、word-break属性 11、white-space属性 12、text-transform 12、writing-mo…...

7、使用真机调试鸿蒙项目

此处以华为手机为例&#xff0c;版本为鸿蒙4.0. 一、打开手机调试功能 1、打开开发者模式 打开“设置”—“关于手机”&#xff0c;连续点击“软件版本”可打开开发者模式 2、开启USB调试功能 打开“设置”—“系统更新”—“开发者选项”&#xff0c;下拉找到“USB调试”…...

GPT实战系列-P-Tuning本地化训练ChatGLM2等LLM模型,到底做了什么?(一)

GPT实战系列-如何使用P-Tuning本地化训练ChatGLM2等LLM模型&#xff1f; 文章目录 GPT实战系列-如何使用P-Tuning本地化训练ChatGLM2等LLM模型&#xff1f;P-Tuning微调训练概述1、预训练模型或者是torch模型2、训练器的超参数3、数据预处理工具4、加载数据5、分词处理6、数据预…...

【Python】爬虫代理IP的使用+建立代理IP池

目录 前言 一、代理IP 1. 代理IP的获取 2. 代理IP的验证 3. 代理IP的使用 二、建立代理IP池 1. 代理IP池的建立 2. 动态维护代理IP池 三、完整代码 总结 前言 在进行网络爬虫开发时&#xff0c;我们很容易遭遇反爬虫机制的阻碍。为了规避反爬虫机制&#xff0c;我们…...

JS-项目实战-新增水果库存功能实现

1、fruit.js function $(name) {if (name) {//假设name是 #fruit_tblif (name.startsWith("#")) {name name.substring(1); //fruit_tblreturn document.getElementById(name);} else {return document.getElementsByName(name); //返回的是NodeList类型}} }//当…...

mysql 常见操作指令

use k_order – 查看版本 select version(); – 查看所有数据库 show databases; – 查看所有执行引擎 show engines; – 查看当前数据库 select database(); – 查看所有table show tables; – 查看默认存储引擎 SHOW VARIABLES LIKE ‘default_storage_engine’; – 系…...

Vue3 生命周期

如下是Vue3的生命周期函数图&#xff1a; 一、Vue2生命周期和Vue3声明周期的区别 1. Vue2 中&#xff0c;只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。 Vue3中必须要将Vue实例对象挂载完成&#xff0c;所有的准备工作做完&#xff0c;…...

rocketmq 安装dashboard1.0.0 mq消息控制台安装 rocketmq控制台安装 rocketmq-dashboard-1.0.0编译安装

1. 官网&#xff1a; 下载 | RocketMQ 2. dashboard安装包位置&#xff1a; 在连接最下面&#xff0c;点击download.zip即可 3. 需要安装maven, 编译命令&#xff1a; mvn clean install -U -Dmaven.test.skiptrue4. 启动jar: java -jar rocketmq-dashboard-1.0.0.jar &…...

常见的数据结构有哪些?

数据结构分为逻辑结构和物理结构。 逻辑结构&#xff1a;指数据元素之间逻辑关系的数据结构&#xff0c;这里的逻辑关系是指数据元素之间的前后间关系&#xff0c;与数据在计算机中的存储位置无关。物理结构&#xff1a;指数据的逻辑结构在计算机存储空间中的存放形式称为数据…...

Spring中有哪几种方法获取HttpSession对象

Spring MVC 可以直接作为Controller的参数传入&#xff1a; RequestMapping(value "/test", method RequestMethod.POST, produces "application/json;charsetUTF-8")ResponseBodypublic Map test(HttpSession session, String otherParam) {//TODOre…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...