vue2-常用的修饰符有哪些应用场景?

news2024/11/14 1:13:00

1、修饰符是什么?
在程序的世界里,修饰符是用于限定类型以及类型成员的声明的一种 符号。
在vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些重复的事情,而能有更多的精力专注于程序的逻辑处理。
vue中的修饰符主要分为以下五种。
表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符

2、修饰符的作用
表单修饰符
在我们填写表单的时候用的最多的就是input标签,指令最多的就是v-model
关于表单的修饰符有如下:
lazy、trim、number
lazy:在填完信息,光标离开标签的时候,才会将值赋给value,也就是在change事件之后再进行信息同步。
在这里插入图片描述
trim:自动过滤用户输入的首空格字符,而中间的空格不会过滤。
在这里插入图片描述
number:自动将用户的输入转为数值类型,但如果这个值无法被parseFloat解析,则会返回原来的值。
在这里插入图片描述
事件修饰符:就是对事件捕获以及目标进行了处理。有如下修饰符。
stop
prevent
self
once
capture
passive
native

stop:阻止了事件冒泡,相当于调用了event.stopPropagation方法
在这里插入图片描述

prevent:阻止了事件的默认行为,相当于调用了event。prevnentDefault方法
在这里插入图片描述

self:只当在event.target是当前元素时触发处理函数
在这里插入图片描述
使用修饰符时,顺序很重要。相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击。而v-on:click.self.prvent只会阻止对元素自身的点击。

once:绑定了事件之后只能触发一次,第二次就不会触发了。
在这里插入图片描述

capture:使事件触发从包含这个元素的顶层开始往下触发

在这里插入图片描述

passive:在移动端,当我们监听元素滚动事件的时候,会一直触发onscroll事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件添加了一个.lazy
修饰符。
在这里插入图片描述
不要把.passive和.prevent一起使用,因为.prevent将会被忽略,同时浏览器可能会给你展示一个警告。
passive会告诉浏览器你不想阻止事件的默认行为。

native:让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件。
在这里插入图片描述
使用.native修饰符操作普通html标签是会令事件失效。

鼠标按钮修饰符:是针对左键,中键,右键点击,如下:
left:左键点击
right:右键点击
middle:中键点击
在这里插入图片描述

键盘修饰符:用来修饰键盘事件(onkeyup,onkeydown)的,如下:
keyCode存在很多,但vue为我们提供了别名,分为以下几种:
普通键(enter、tab、delete、space、esc、up、、、)
系统修饰键(ctrl、alt、meta、shift、、、)
在这里插入图片描述
还可以通过以下方式自定义一些全局的键盘码别名。
在这里插入图片描述
v-bind修饰符
v-bind修饰符主要是为属性进行操作,一般有:async、prop、camel
async:能对一个props进行一个双向数据绑定
在这里插入图片描述
以上方法相当于下面的简写

在这里插入图片描述
使用async需要注意以下两点:
使用async的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中的props中声明的名称完全一致。

注意:带有.sync修饰符的v-bind不能和表达式一起使用

将v-bind.sync用在一个字面量的对象上,例如v-bind.sync={”title:doc.title“},是无法正常工作的。

props:设置自定义标签属性,避免暴漏数据,防止污染HTML结构。
在这里插入图片描述
camel:将命名变为驼峰命名法,如将view-Box属性名转化为viewBox
在这里插入图片描述
3、应用场景
根据每一个修饰符的功能,可以得到以下修饰符的应用场景:
.stop:阻止事件冒泡
.native:绑定原生事件
.once:事件只执行一次
.self:将事件绑定在自身身上,相当于阻止事件冒泡
.prevent:阻止默认事件
.caption:用于事件捕获
.once:只触发一次
.keyCode:监听特定键盘按下
.right:右键

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/839791.html

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

相关文章

安全作业-Race竞争型漏洞、原型链污染

1.race漏洞一直卡在虚拟机安装上(待研究) 2.原型链污染 一、第一题js代码 const express require(express) var hbs require(hbs); var bodyParser require(body-parser); const md5 require(md5); var morganBody require(morgan-body); const app express(); var use…

入侵检测-IDS

1. 什么是IDS? IDS(intrusion detection system)入侵检测系统,是一种对网络传输进行即时监视,在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备。它会对系统的运行状态进行监视,发现各种攻击企…

外边距实现居中的写法

1、代码实例 2、默认是贴到左侧对齐的,但我们想要把他贴到中间对齐 3、居中的写法 4、这样就可以保证盒子居中了 5、以上写法仅适于行内元素和行内块元素的写法,有没有什么方法适用于行内块元素:可以添加text-align:center进行添加&#xff0…

stl_list类(使用+实现)(C++)

list 一、list-简单介绍二、list的常用接口1.常见构造2.iterator的使用3.Capacity和Element access4.Modifiers5.list的迭代器失效 三、list实现四、vector 和 list 对比五、迭代器1.迭代器的实现2.迭代器的分类(按照功能分类)3.反向迭代器(1)、包装逻辑…

Julia 日期和时间

Julia 通过 Dates 模块提供了以下三个函数来处理日期和时间: Date:表示日期,精确到日,只显示日期。DateTime:表示日期和时间,精确到毫秒。DateTime:表示日时间,精确到纳秒&#xff…

Unity 3D ScrollRect和ScrollView回弹问题的解决

你是否是这样&#xff1f; Content高度 < 全部Cell加在一起的总高 他就认为你的全部Cell加起来就跟Content一样大&#xff0c;所以才出现了这种完全回弹 我该怎么办&#xff1f; 很简单&#xff0c;改变Content的长度跟所有Cell的和一样大 void RefreshSize(){float allD…

分布式Redis详解

目录 前言安装redis的俩种方法Redis 与 MySQL的区别Redis可以实现那些功能Redis常用的数据类型有序列表的底层是如何实现的?什么是跳跃表 Redis在Spring中的使用 前言 Redis我们最近学习必备工具之一了, 接下来我们将讲解Redis的简单应用 ,以及相关原理 安装redis的俩种方法…

python自动收集粘贴板

win10的粘贴板可以用“winV”查看&#xff1a; 每次复制都相当于入栈一个字符串&#xff0c;粘贴相当于获取栈顶。 但是系统自带的这个粘贴板貌似不能一键导出&#xff0c;所以我写了个python代码完成这个功能&#xff1a; import pyperclip import timetmp while True:txt…

【LeetCode】剑指 Offer Ⅱ 第3章:字符串(7道题) -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…

vue2-vue中mixin到底是什么?

1、mixin是什么&#xff1f; Mixin是面向对象程序设计语言中的类&#xff0c;提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类。 Mixin类通常作为功能模块使用&#xff0c;在需要该功能时“混入”&#xff0c;有利于代码的复用又避免了多继承的复杂。 1.1 vue中…

LeetCode643. 子数组最大平均数 I

题干 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于 10^-5 的答案都将被视为正确答案。 示例1&#xff1a; 输入&#xff1a;nums [1,12,-5,-6,50,3], k 4 输出&am…

Matlab中图的最短路径

前言&#xff1a; 图的基本概念&#xff1a; 若想简单绘制图可以利用此网站&#xff1a; 左上角Undirected/Directed是无向图/有向图 左边 0-index &#xff0c;1-index为0下标&#xff0c;1下标。 Node Count为节点个数 Graph Data&#xff1a;最初尾节点的名称&#xff…

HDFS小文件解决方案---archive归档文件命令

小文件解决方案 背景Archive概述创建archive查看归档文件查看归档之后的样子查看归档文件之前的样子 提取archivearchive注意事项 背景 hdfs并不擅长存储小文件&#xff0c;因为每个文件最少一个block&#xff0c;每个block的元数据都会在namenode占用内存&#xff0c;如果存在…

WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过主要集中在信息收集&#xff0c;漏洞发现&#xff0c;漏洞利用&#xff0c;权限控制四个阶段。 1、什么是WAF&#xff1f; Web Application Firewall&#xff08;web应用防火墙&#xff09;&#xff0c;一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

Java thymeleaf bug排查记录

刚学Java 做项目时报了一个错误 一时间看的莫名其妙 EL1008E: Property or field createTime cannot be found on object of type java.util.HashMap - maybe not public or not valid? 随即向上排查至第一个报错&#xff0c;发现是thymeleaf渲染时报错。 Exception proces…

ChatGPT下架官方检测工具,承认无法鉴别AI内容

去年底&#xff0c;OpenAI 推出的 ChatGPT &#xff0c;带来了生成式人工智能涌现的热潮。它不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务&#xff0c;还能通过学习和理解人类的语言来进行对话&#xff0c;并根据聊天的上下文进行互动。 但随之而来的争议也让人…

代码随想录算法训练营day55

文章目录 Day55 判断子序列题目思路代码 不同的子序列题目思路代码 Day55 判断子序列 392. 判断子序列 - 力扣&#xff08;LeetCode&#xff09; 题目 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以…

Java课设--学生信息管理系统(例1)

文章目录 前提一、运行效果二、Text实现类三、Manage选择类四、StudentWay学生方法类五、StudnetSql数据库类 前题 例1为无使用GUI图形界面&#xff0c;例2使用GUI图形界面&#xff01; 首先自己的JDBC驱动已经接好了&#xff0c;连接自己的数据库没有问题。连接数据库可以看…

Linux Day06

目录 一、printf输出问题 二、复制进程fork 2.1进程 2.2 pid_t fork(void); 注意&#xff1a; 2.3逻辑地址和物理地址 2.4写时拷贝技术 一、printf输出问题 printf 函数并不会直接将数据输出到屏幕&#xff0c;而是先放到缓冲区中&#xff0c;只有一下三种情况满 足&a…

2.文件的逻辑结构

第四章 文件管理 2.文件的逻辑结构 顺序文件采用顺序存储则意味着各个逻辑上相邻的记录在物理上也是相邻的存储的。所以如果第0号记录的逻辑地址为0的话&#xff0c;则i号记录的逻辑为i *L。 特别的如果这个定长记录的顺序文件采用串结构&#xff0c;也就是这些记录的顺序和他…