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

自定义指令，全局，局部，注册

news 来源：原创 2025/7/12 23:06:42

让输入框自动获取焦点(每次刷新自动获取焦点）

<template><div><h3>自定义指令</h3><input ref="inp" type="text"></div>
</template><script>
export default {mounted(){this.$refs.inp.focus()}}
</script><style></style>

1.全局注册指令

在main.js中全局注册指令

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 全局注册指令
// 第一个参数是指令名，第二个参数是指令的配置项（在配置项里可以写指令相关的钩子，相关的生命周期函数）
Vue.directive('focus', {// inserted会在指令所在元素被插入到页面时触发inserted(el) {// el就是指令所绑定的元素el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')

《！--在input标签中写上自定义指令 v-自定义的指令名 -->
<template><div><h3>自定义指令</h3><input v-focus ref="inp" type="text"></div>
</template><script>
export default {// mounted(){//   this.$refs.inp.focus()// }}
</script><style></style>

2.局部注册指令（只在当前组件范围使用）

<template><div><h3>自定义指令</h3><input v-focus ref="inp" type="text"></div>
</template><script>
export default {// mounted(){//   this.$refs.inp.focus()// }directives:{// 指令名：指令的配置项focus:{// 这里同样也有个形参elinserted(el){el.focus()}}}}
</script><style></style>

封装一个指令v-color

自定义指令 v-color ,然后在h1标签中写入v-color指令，但是如果指令颜色写固定为red的话，每个使用该指令的标签都是同样的颜色。

希望标签是不同颜色，将该自定义指令传入不同的值，在data中定义不同的值。

但是自定义指令中是拿不到传入指令的值的，所以必须通过另一个配置项binding，通过binding.value取得传入的指令的值
<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data(){return{color1:'red',color2:'green'}},directives:{color:{//1.inserted提供的是元素被添加到页面中的逻辑，直接修改数据是无法改变颜色的// el形参表示的是传入的dom元素inserted(el,binding){// console.log(el,binding.value);// 如何拿到传递的不同的值?在binding配置对象中通过binding.value中拿到所对应的变量值// binding.value就是指令的值el.style.color = binding.value},// update(el,binding){//   el.style.color = binding.value// }}}}
</script><style></style>

自定义指令，全局，局部，注册

让输入框自动获取焦点(每次刷新自动获取焦点） <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…...

编程日记 2025/7/12 23:06:42

存储类内存，非易失性内存）的升级换代，将有利于促进【PCIe交换芯片】市场的发展

摘要根据 HengCe（恒策咨询）的统计及预测，2023年全球PCIe交换芯片市场销售额达到了10.05亿美元，预计2030年将达到23.81亿美元，年复合增长率（CAGR）为12.5%（2024-2030）。地…...

编程日记 2025/7/12 6:21:16

泷羽sec-burp(7)

免责声明学习视频来自 B 站up主泷羽sec，如涉及侵权马上删除文章。笔记的只是方便各位师傅学习知识，以下代码、网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。泷羽sec官网：http…...

编程日记 2025/7/12 21:35:50

OpenCV图像处理——二值化原理与代码实现（C++/Python）

概述在 OpenCV 中，二值化（Binarization）是一种图像处理操作，它的目的是将一幅灰度图像转换为仅包含两种像素值（通常为 0 和 255，分别代表黑色和白色）的二值图像。通过设定一个合适的阈值&…...

编程日记 2025/7/12 21:31:13

Scala 高阶模式案例解析：从入门到实战

引言 Scala 作为一种功能强大的多范式编程语言，因其函数式编程特性而广受欢迎。其中，高阶模式（High-Order Patterns）是 Scala 函数式编程的核心概念之一，为开发者提供了解决复杂问题的优雅方式。本篇文章将全面解析 S…...

编程日记 2025/7/12 21:35:01

30天学会Go--第8天 GO语言 Gin Web框架学习与实践

30天学会Go–第8天 GO语言 Gin Web框架学习与实践文章目录 30天学会Go--第8天 GO语言 Gin Web框架学习与实践前言一、Gin 的简介与安装1.1 Gin 的特点1.2 安装 Gin 二、Gin 的基础用法2.1 路由2.1.1 基本路由2.1.2 路由参数2.1.3 查询参数2.1.4 路由分组 2.2 中间件2.2.1 使用…...

编程日记 2025/7/12 21:54:22

用R（语言）学R-Learning R，In R

一、安装swirl包在R语言控制面板，对话框输入以下命令： swirl 是一个非常有用的 R 包，它允许你通过交互式教程来学习 R 语言。以下是使用 swirl 包的基本步骤： 安装 swirl 包：首先，你需要在 R 中安装 swi…...

编程日记 2025/7/12 22:43:35

【银河麒麟操作系统运维】某平台多台虚拟机异常重启分析及处理

了解更多银河麒麟操作系统全新产品，请点击访问麒麟软件产品专区：https://product.kylinos.cn 开发者专区：https://developer.kylinos.cn 文档中心：https://documentkylinos.cn 现象描述某虚拟化平台多台虚拟机于凌晨触发异常…...

编程日记 2025/7/12 21:57:19

线性代数中的谱分解

一、谱分解的基本原理谱分解（Spectral Decomposition）是线性代数中的一个重要概念，特别是在研究矩阵的特征值和特征向量时。它指的是将一个矩阵分解为其特征值和特征向量的组合，从而简化矩阵的运算和分析。谱分解通常适用于对称…...

编程日记 2025/7/12 21:27:03

synchronized(juc)

目录线程一：interrupt设计模式两阶段终止模式interrupt打断park线程二:守护线程三:线程状态五个状态(从操作系统角度来说)六种状态(从java API的角度) 共享模型之管程一：上下文切换的安全问题临界区和竟态条件二：synchronized解决安全问题…...

编程日记 2025/7/12 8:55:00

HTML Input 文件上传功能全解析:从基础到优化

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/7/12 21:51:13

目录什么是Spring事务为什么需要Spring事务Spring事务的实现 Spring事务的传播机制Spring事务的底层原理 EnableTransactionManagement --开启Spring管理事务Import(TransactionManagementConfigurationSelector.class) --提供两个beanAutoProxyRegistrar --启用AOP的功能&am…...

编程日记 2025/7/12 21:51:46

React学习笔记2-初识React

这篇七个点：1 环境搭建， 2 JSX， 3 组件，4 数据流，5 生命周期，6 React与DOM，7 实例 1 环境搭建 1.1 引用React CDN <!DOCTYPE html> <html lang"en"> <head><met…...

编程日记 2025/7/12 22:29:38

【5G】Spectrum 频谱

频谱是移动运营商的关键资产，可用的频谱是定义移动网络容量和覆盖范围的重要因素。本章讨论了5G的不同频谱选项、它们的特性以及5G早期部署阶段的预期频谱。5G是首个旨在利用大约400 MHz到90 GHz之间所有频段的移动无线系统。5G还设计用于在许可、共享和非许可频谱带…...

编程日记 2025/7/12 21:53:08

解决流网络中不存在s~u~t路径的节点的最大流问题

解决流网络中不存在s~u~t路径的节点的最大流问题问题分析伪代码C代码示例解释在流网络问题中，我们通常会假设对于所有的节点v ∈ V，都存在一条从源点s到汇点t经过v的路径。然而，当这一假设不成立时，即存在某些节点u，使得不存在路径sut，我们需要证明在这种情况下，网络中…...

编程日记 2025/7/12 21:48:09

springboot的 nacos 配置获取不到导致启动失败及日志不输出问题

前言问题 1. 本地启动应用时，一切正常，但是部署 docker 后，会因为获取不到 nacos 中的配置导致服务启动失败。 2.当 docker 中的服务一直重启，可能会突然某一次启动成功，之后只要不重新构建 docker 镜像&am…...

编程日记 2025/7/12 22:42:07

word poi-tl 图表功能增强，插入图表折线图、柱状图、饼状图

目录问题解决问题poi-tl介绍功能实现引入依赖功能介绍功能实例饼图模版代码效果图雷达图（模版同饼图）代码效果图柱状图（模版同饼图）代码效果图附加CustomCharts 工具类CustomChartSingleSeriesRenderData 数据对象CustomCha…...

编程日记 2025/7/12 21:12:24

SpringBoot 项目如何集成 JWT

SpringBoot 项目如何集成 JWT JWT JSON Web Token (JWT) 是一个开放标准(RFC 7519)，它定义了一种紧凑的、自包含的方式，用于作为 JSON 对象在各方之间安全地传输信息。在 Oauth2 中，其实就是返回访问令牌 （access_token&#…...

编程日记 2025/7/12 21:27:53

如何查看电脑刷新率

Windows 系统通过显示设置查看： 右键点击桌面空白处，选择 “显示设置”。在打开的窗口中，找到 “高级显示设置”。点击 “显示适配器属性”。在弹出的窗口中，选择 “监视器” 选项卡，即可看到当前的屏幕刷新率。使用 …...

编程日记 2025/7/12 22:27:39

MVC基础——市场管理系统（一）

文章目录项目地址一、创建项目结构1.1 创建程序以及Controller1.2 创建View1.3 创建Models层，并且在Edit页面显示1.4 创建Layou模板页面1.5 创建静态文件css中间件二、Categories的CRUD2.1 使用静态仓库存储数据2.2 将Categorie的列表显示在页面中(List)2.3 创建_ViewImport.…...

编程日记 2025/7/12 22:33:56

面向对象中多态的含义

多态性的定义多态（Polymorphism）是面向对象编程中的一个重要概念。它是指同一个函数名或操作符在不同的对象或情境下具有不同的行为。简单来说，就是 “多种形态”。例如，在一个图形处理程序中，有 “计算面积” 这个操…...

编程日记 2025/7/12 22:26:07

L2G3000-LMDeploy 量化部署实践

文章目录 LMDeploy 量化部署实践闯关任务环境配置W4A16 量化 KV cacheKV cache 量化Function call LMDeploy 量化部署实践闯关任务环境配置 conda create -n lmdeploy python3.10 -y conda activate lmdeploy conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.…...

编程日记 2025/7/12 22:42:55

ubuntu下的chattts 学习5：Example: self introduction

代码 import ChatTTS import torch import torchaudiochat ChatTTS.Chat() chat.load(compileFalse) # Set to True for better performance ################################### inputs_en """ chat T T S is a text to speech model designed for dialogu…...

编程日记 2025/7/12 22:29:37

IDEA的service窗口中启动类是灰色且容易消失

大家在学习Spring Cloud的过程中,随着项目的深入,会分出很多个微服务,当我们的服务数量大于等于三个的时候,IDEA会给我们的服务整理起来,类似于这样但是当我们的微服务数量达到5个以上的时候,再启动服务的时候,服务的启动类就会变成灰色,而且还容易丢失解决方法我们按住…...

编程日记 2025/7/12 22:04:56

vue中pdf.js的使用，包括pdf显示，跳转指定页面，高亮关键词

目录一、下载pdf.js 二、引入到本地的项目中三、实现预览pdf 四、跳转到指定页面五、利用pdf里面的find查找关键词六、修改页面大小为实际大小一、下载pdf.js https://github.com/mozilla/pdf.js 里面有很多的版本， 高版本的可能浏览器不兼容或者还要考…...

编程日记 2025/7/8 10:21:29

Cherno C++学习笔记 P32 字符串

这篇文章我们来讲字符串。字符串可以说是最重要的变量类型了，因为对字符串的读写极大地影响到我们的程序和用户之间的交互。甚至很多很庞大的程序就只是在处理字符串。对于字符串，我们同时需要有关于数组和指针的关系，字符串的实现与数组是…...

编程日记 2025/7/12 22:36:14

【C++初阶】第7课—标准模版库STL(string_1)

文章目录 1. 什么是STL2. STL六大组件3. 标准库中string类3.1 auto关键字3.2 范围for3.3 string类的类型3.4 string类的常用接口(string类对象的常见构造)3.5 string的析构和赋值运算符重载3.6 string类对象的容量操作 1. 什么是STL STL(standard template library—标准模板库…...

编程日记 2025/7/12 22:17:22

GESP202306 一级【时间规划】题解（AC）

》》》点我查看「视频」详解》》》 AC_Code #include <bits/stdc.h> using namespace std;int main() {int h1, m1, h2, m2;cin >> h1 >> m1;cin >> h2 >> m2;h1 h1 * 60 m1;h2 h2 * 60 m2;cout << h2 - h1;return 0; }》》》点我查…...

编程日记 2025/7/12 22:44:59

React基础知识四 Hooks

什么是hooks？ (coderwhy) hooks是react 16.8（2019年）出的新特性。 react有两种形式来创建组件——类式和函数式。在hooks之前类式组件就是react最主流的编程方式。这个时候，函数式组件是非常鸡肋的，几乎没什么用。因…...

编程日记 2025/7/12 21:48:09

Linux服务器通用安全加固指南

1、保护引导过程（以Grub引导为例） 在 /etc/inittab 中添加 sp:S:respawn:/sbin/sulogin，以确保当切换到单用户模式时运行级的配置要求输入 root 密码： cp /etc/inittab / etc/initab .bak vim /etc/inittab 退出：es…...

编程日记 2025/7/9 13:42:43

vsphere vcenter web 界面的介绍

这是主页的页面...

编程日记 2025/7/9 13:42:40

分类算法中的样本不平衡问题及其解决方案

一、样本不平衡问题概述在机器学习的分类任务中，样本不平衡是指不同类别训练样本数量存在显著差异的现象。这一差异会给模型训练和性能评估带来挑战，尤其在处理少数类样本时，模型可能难以有效学习其特征。以二分类为例，理想情况…...

编程日记 2025/7/10 18:47:49

[LitCTF 2023]破损的图片(初级)

[LitCTF 2023]破损的图片(初级) 我们下载附件得到一个没有后缀的文件，拖去010看一看，发现本来应该是文件头的那部分不大对劲，结合后面四个点以及IHDR，大致也应该知道是啥了修改第一行为png 89 50 4E 47 0D 0A 1A 0A 00 00 00 …...

编程日记 2025/7/12 19:02:24

Bert的Transformer原理

多义词如何应对： 答：通过Self attention，不同的上下文，对同一个"苹果"，得到截然不同的embedding激活值； Multi-head的作用： 有些类似CNN里用的多个卷积核得到多个Channel的特征图&…...

编程日记 2025/7/9 13:42:27

多人聊天室 NIO模型实现

NIO编程模型 Selector监听客户端不同的zhuangtai不同客户端触发不同的状态后，交由相应的handles处理Selector和对应的处理handles都是在同一线程上实现的 I/O多路复用在Java中，I/O多路复用是一种技术，它允许单个线程处理多个输入/输出&…...

编程日记 2025/7/9 13:42:23

vue.js学习(day 20)

综合案例：购物车数据渲染构建cart购物车模块准备后端接口服务环境请求数据存入vuex cart.js // 新建购物车模块 import axios from axios export default {namespaced: true,state () {return {// 购物车数据 [{},{}]list: []}},mutations: {updateList (…...

编程日记 2025/7/9 13:42:19

蓝桥杯二分题

P1083 [NOIP2012 提高组] 借教室题目描述在大学期间，经常需要租借教室。大到院系举办活动，小到学习小组自习讨论，都需要向学校申请借教室。教室的大小功能不同，借教室人的身份不同，借教室的手续也不一样。面对海量租…...

编程日记 2025/7/9 3:23:57

通过 CC-Link IEFB 转 Modbus RTU 网关达成三菱 FX5U PLC 与 RS485 温湿度传感器通信的配置实例展示

一. 案例背景在某一化工厂现场，现场的设备是三菱FX5UPLC为了避免因为工作环境存在潮湿度较高性、较高温度等对员工造成不健康或危险的现象，现决定在现场装数多台温湿度传感器。通过捷米特JM-CCLKIE-RTU网关将三菱PLC及温湿度传感器连接起来并连接上位机…...

编程日记 2025/7/9 13:42:12

视频质量评价算法 DOVER 使用教程

DOVER 介绍 DOVER是为ICCV2023会议论文“Exploring Video Quality Assessment on User Generated Contents from Aesthetic and Technical Perspectives”提供的官方代码、演示和权重的项目。DOVER（Disentangled Objective Video Quality Evaluator）是一个用于评估用户生成内…...

编程日记 2025/7/9 13:42:08

视频编辑技术：一键生成混剪视频的AI技术应用

随着视频内容的爆炸式增长，视频编辑技术也在不断进步。本文将探讨如何利用AI技术，实现一键生成混剪视频，并自动添加配音和字幕，以提高视频编辑的效率和质量。 AI技术在视频编辑中的应用 AI技术在视频编辑领域的应用越来越广泛&am…...

编程日记 2025/7/10 16:00:13

精确的单向延迟测量：使用普通硬件和软件

论文标题：Precise One-way Delay Measurement with Common Hardware and Software（精确的单向延迟测量：使用普通硬件和软件） 作者信息：Maciej Muehleisen 和 Mazen Abdel Latif，来自Ericsson Research Eri…...

编程日记 2025/7/9 13:42:01

【博士每天一篇文献-COIL算法】Co-transport for class-incremental learning

1 介绍年份：2021 会议：2021ACM Zhou D W, Ye H J, Zhan D C. Co-transport for class-incremental learning[C]//Proceedings of the 29th ACM International Conference on Multimedia. 2021: 1645-1654. 本文提出的算法是CO-transport for clas…...

编程日记 2025/7/9 13:41:58

AI与BI的火花：大语言模型如何重塑商业智能的未来

大家好，我是独孤风。在当今这个数据驱动的时代，企业对于信息的需求如同对于氧气的需求一般至关重要。商业智能（BI）作为企业获取、分析和呈现数据的关键工具，正在经历一场深刻的变革，而这一变革的催化剂正是…...

编程日记 2025/7/8 17:12:47

C++设计模式（建造者、中介者、备忘录）

一、建造者模式将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。示例： //房子（产品类） class House { private:int rooms;int windows;string decoration; public:void setRooms(int r) {rooms …...

编程日记 2025/7/12 22:07:23

【数据结构】遍历二叉树

遍历二叉树的算法描述（递归定义） 先序遍历若二叉树为空，则空操作； 否则 （1）访问根节点 （2）先序遍历左子树 （3）先序遍历右子树中序遍历若二叉树为空…...

编程日记 2025/7/9 13:41:47

鸿蒙获取 APP 信息及手机信息

前言：获取 APP 版本信息可以通过 bundleManager.getBundleInfoForSelfSync(bundleFlags) 去获取，获取手机信息可以通过 kit.BasicServicesKit 库去获取，以下是封装好的工具类。 import bundleManager from ohos.bundle.bundleManager; impo…...

编程日记 2025/7/11 16:58:05

OpenWRT下深入了解IPv6——SLAAC

一、SLAAC（无状态地址自动配置） 1.基本原理 SLAAC 是 IPv6 中的一种地址自动配置机制，它允许设备根据网络中的路由器通告信息和自身的 MAC 地址自动生成 IPv6 地址。在 IPv6 网络中，MAC 地址长度为 48 位，而 IPv6 地…...

编程日记 2025/7/9 13:41:40

UE5水文章 UI按钮样式快捷复制黏贴

shift右键拷贝 shift右键黏贴...

编程日记 2025/7/9 13:41:35

迭代器模式的理解和实践

引言在软件开发中，我们经常需要遍历容器对象（如数组、列表、集合等）中的元素。如果每个容器对象都实现自己的遍历算法，那么代码将会变得冗余且难以维护。为了解决这个问题，迭代器模式应运而生。迭代器模式是一种行为型…...

编程日记 2025/7/9 13:41:30

封装一个指令v-color

相关文章：