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

vue自定义指令以及angular自定义指令(以禁止输入空格为例)

哈喽,小伙伴们,大家好啊,最近要实现一个vue自定义指令,就是让input输入框禁止输入空格

  1. 建立一个directives的指令文件,里面专门用来建立各个指令的

  1. 官方文档:

  1. 自定义指令 | Vue.js (vuejs.org)

  1. 我们都知道vue中有常见得指令 比如v-show v-for v-if v-on v-blind

  1. vue还可以允许你注册自定义得指令(英文custom Directives

我们已经介绍了两种在 Vue 中重用代码的方式:组件组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子,当一个 input 元素被 Vue 插入到 DOM 中后,它会被自动聚焦:(vue片段原话)

import Vue from 'vue';Vue.directive('input-no-space', {inserted(el) {// 监听键盘落下的事件,禁止输入空格// 监听输入事件,以防如果有带有空格的文本粘贴进来,可以给予替换el.addeventListenser('input',(e) => {})}
})

vue中demo

const focus = {mounted:(el) => el.focus()
}export default {directives: {// 在模板中启用v-focusfocus}
}<input v-focus/>

对于自定义指令来说,一个很常见的情况是仅仅需要在mounted和updated上事项相同的行为

<div v-color="color"></div>app.directive('color',(el,blinding) => {// 这会在mounted和updated时调用el.style.color = binding.value
})

对象字面量

如果你的指令需要多个值,你可以向它传递一个js对象字面量

<div v-demo="{color: 'white',text: 'hello!'}"></div>app.directive('demo',(el,binding) => {console.log(binding.value.color)// whiteconsole.log(binding.value.text)// hello
})

angular自定义指令:

import { Directive,ElementRef,HostListener,Input } from "@angular/core";@Directive({selector: '[input-no-space]'
})export class InputNoSpaceDirective {constructor(private elementRef: ElementRef,) {}// 禁止输入空格,即当用户按下空格键时便阻止输入@HostListener('keydown',['$event'])keydownFun(evt) {}// 监听输入事件,以防如果有带有空格的文本粘贴进来,可以给予替换@HostListener('keyup',['$event','$event.target'])keyupFun(evt,target) {}
}

好了,今天的文章就写到这里了

相关文章:

vue自定义指令以及angular自定义指令(以禁止输入空格为例)

哈喽&#xff0c;小伙伴们&#xff0c;大家好啊&#xff0c;最近要实现一个vue自定义指令&#xff0c;就是让input输入框禁止输入空格建立一个directives的指令文件&#xff0c;里面专门用来建立各个指令的官方文档&#xff1a;自定义指令 | Vue.js (vuejs.org)我们都知道vue中…...

异常 复习

异常复习 异常(广义)&#xff1a;泛指程序中一切不正常的情况 错误&#xff1a;例如内存不够用,程序是无法解决的 异常(狭义)&#xff1a;程序在运行中出现问题,但是可以通过异常处理机制处理,程序可以继续向后执行 异常体系 Throwable类有两个直接子类&#xff1a;Excepti…...

K8s:开源安全平台 kubescape 实现 Pod 的安全合规检查/镜像漏洞扫描

写在前面 生产环境中的 k8s 集群安全不可忽略&#xff0c;即使是内网环境容器化的应用部署虽然本质上没有变化&#xff0c;始终是机器上的一个进程但是提高了安全问题的处理的复杂性分享一个开源的 k8s 集群安全合规检查/漏洞扫描 工具 kubescape博文内容涉及&#xff1a; kube…...

C#中,FTP同步或异步读取大量文件

一次快速读取上万个文件中的内容 在C#中&#xff0c;可以使用FTP客户端类&#xff08;如FtpWebRequest&#xff09;来连接FTP服务器并进行文件操作。一次快速读取上万个文件中的内容&#xff0c;可以采用多线程的方式并发读取文件。 以下是一个示例代码&#xff0c;用于读取FT…...

STM32单片机的FLASH和RAM

STM32内置有Flash和RAM&#xff08;而RAM分为SRAM和DRAM&#xff0c;STM32内为SRAM&#xff09;&#xff0c;硬件上他们是不同的设备存储器、属于两个器件&#xff0c;但这两个存储器的寄存器输入输出端口被组织在同一个虚拟线性地址空间内。 MDK预处理、编译、汇编、链接后编…...

Java 二叉树的遍历

二叉树的遍历&#xff08;traversing binary tree&#xff09;是指从根结点出发&#xff0c;按照某种次序依次访问二叉树中所有的结点&#xff0c;使得每个结点被访问依次且仅被访问一次。前序遍历&#xff08;根 左 右&#xff09;先访问根结点&#xff0c;然后前序遍历左子树…...

实习日记-C#

数据类型 字符串常量 string a "hello, world"; // hello, world string b "hello, world"; // hello, world string c "hello \t world"; // hello world string d "hello \t wor…...

Tech Lead如何引导团队成员解决问题?

作为一个开发团队的Tech Lead&#xff0c;当团队成员向你寻求帮助时&#xff0c;你有没有说过下面这些话&#xff1f; 你别管了&#xff0c;我来解决这个问题你只要。。。就行了你先做其他的吧&#xff0c;我研究一下&#xff0c;然后告诉你怎么做 当我们说这些话时&#xff…...

07--组件

一、小程序组件分类微信团队为开发者提供了一系列基础组件&#xff0c;开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的&#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签&#xff0c;只不过标签…...

怎么做好一个完整的项目复盘

复盘&#xff0c;是运营必不可少的能力&#xff0c;小到一次买菜的经历&#xff0c;大到百亿千亿的投资项目&#xff0c;都可以通过复盘来总结规律、提升水平。简单说来&#xff0c;复盘可以达到的效果有两条&#xff1a;优化弱项&#xff0c;强化强项明确自己的价值&#xff0…...

浅谈一下mysql8.0与5.7的字符集

修改字符集 修改步骤 在MySQL8.0版本之前&#xff0c;默认字符集为1atin1,utf8字符集指向的是utf8mb3。网站开发人员在数据库设计的时候往往会将编码修改为ut8字符集。如果遗忘修改默认的编码&#xff0c;就会出现乱码的问题。从MySQL8.0开始&#xff0c;数据库的默认编码将改…...

paddle推理部署(cpu)

我没按照官方文档去做&#xff0c;吐槽一下&#xff0c;官方文档有点混乱。。一、概述总结起来&#xff0c;就是用c示例代码&#xff0c;用一个模型做推理。二、示例代码下载https://www.paddlepaddle.org.cn/paddle/paddleinferencehttps://github.com/PaddlePaddle/Paddle-In…...

想开发IM集群?先搞懂什么是RPC!

即时通讯网官方技术群和社区里&#xff0c;经常有开发者在纠结怎么开发IM集群&#xff0c;虽然真正的使用人数&#xff0c;可能用个人电脑单机都能支撑。你也许会说&#xff0c;明明不需要用到IM集群&#xff0c;干吗要自找麻烦&#xff1f;答曰&#xff1a;“老板说这个得有&a…...

案例13-前端对localStorage的使用分析

一&#xff1a;背景介绍 前端在调用后端接口获取某一个人的评论次数、获赞次数、回复次数。调用之后判断后端返回过来的值。如果返回回来的值是0的话&#xff0c;从缓存中获取对应的值&#xff0c;如果从缓存中获取的评论次数为空那么其他两个的次数也为0。 二&#xff1a;思路…...

CNNIC第51次中国互联网络发展状况统计报告用户规模变化发布、解读与白杨SEO看法

一、第51次《中国互联网络发展状况统计报告》发布 3月2日&#xff0c;中国互联网络信息中心&#xff08;简称CNNIC&#xff09;在京发布第51次《中国互联网络发展状况统计报告》。《报告》显示&#xff0c;截至2022年12月&#xff0c;我国网民规模达10.67亿&#xff0c;较2021…...

【数据结构】单链表的实现

本篇主要总结单链表是如何实现的&#xff0c;数据结构是如何管理数据的&#xff0c;详细的介绍每一步是如何实现以及各种注意事项。&#x1f680;1.单链表的实现&#x1f680;&#x1f36d;1.1单链表的尾插&#x1f36d;1.2单链表的头插&#x1f36d;1.3单链表的打印&#x1f3…...

从0到1做产品!产品设计的6个步骤

相信不少产品经理在刚入行时&#xff0c;都遇到过这样的情况&#xff1a; 接到需求后不知所措&#xff0c;然后下意识地照着竞品开始盲目地画原型。 其实&#xff0c;这样的设计过程不仅缺乏逻辑性&#xff0c;在后续阶段也很容易出现各种问题。 在此&#xff0c;跟大家分享一下…...

ESP32遥控器软硬件设计

一. 前言 做智能车 或者 四轴飞控怎么能少得了遥控器呢&#xff01;在这里给大家分享一个简单的基于ESP32遥控器的设计&#xff0c;包括软硬件以及3D外壳。 二. 硬件设计 1. 功能介绍 遥控器嘛&#xff0c;通信方式是最重要的&#xff0c;本设计支持 WIFI、蓝牙 和 2.4G&…...

vue-template-admin的keep-alive缓存与移除缓存

一&#xff0c;场景 A页面是表单页面&#xff0c;填写后需要跳转B页面。如果B页面不操作返回的话&#xff0c;应该能还原A页面的内容&#xff0c;而如果B页面点击提交&#xff0c;再回到A页面的时候&#xff0c;应该清除缓存。 二&#xff0c;实现方法 A页面要缓存数据&…...

【人工智能 AI】机器学习快速入门教程(Google)

目录 机器学习术语 标签 特性 示例 模型 回归与分类 深入了解机器学习&#xff1a;线性回归 深入了解机器学习&#xff1a;训练和损失 平方损失函数&#xff1a;一种常用的损失函数 机器学习术语 预计用时&#xff1a;8 分钟 什么是&#xff08;监督式&#xff…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...