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

指令的修饰符

news 文章来源：https://blog.csdn.net/h091616/article/details/145100996 2025/2/7 10:07:05

指令的修饰符

参考文献：
Vue的快速上手
Vue指令上
Vue指令下
Vue指令的综合案例

文章目录

指令的修饰符
- 指令修饰符
结语

博客主页: He guolin-CSDN博客

关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力，一起成长！

嗨！收到一张超美的图，愿你每天都能顺心！

在这里插入图片描述

注：在看本文章前优先把参考文献看完！！！

指令修饰符

通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 -> 简化代码。
例如：
① 按键修饰符->键盘回车监听

@keyup.enter

② v-model修饰符

v-model.trim->去除首尾空格
v-model.number->转数字

③事件修饰符

@事件名.stop->阻止冒泡
@事件名.prevent->阻止默认行为

我们以第一个键盘回车监听事件为例子。
我们在上一篇文章写了一个记事本的案例，记事本是点击添加任务按钮才能添加任务，这次我们加一个按回车键也能添加任务，那么代码需要修改的地方为：

//注：add的这个方法是上一篇文章写的添加任务的一个方法
<input type="text" placeholder="请输入任务" v-model="todoName" @keyup.enter="add">

这样按下我们的回车键也可以添加任务。

那么我们来看下它的原理是什么。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h3>@keyup.enter -> 监听键盘回车事件</h3><input type="text" v-model="username" @keyup.enter="fn"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{username:"",},methods:{fn(){console.log("键盘回车时触发",this.username);}}})</script>
</body>
</html>

这个时候只有当我门点击回车时，才会在控制台打印
在这里插入图片描述

倘若我们将.enter去掉

<input type="text" v-model="username" @keyup="fn">

我们不需要按下回车键,只要一输就会在控制台自动打印。
在这里插入图片描述

如果我们要回车时才触发，就要找到对应事件的标识符
我们队我们的方法fn稍作修改，加上我们的事件对象e

fn(e){console.log(e);console.log("键盘回车时触发", this.username);
}

当我们点击1的时候，它会有个key值为1。
在这里插入图片描述

当我们按回车键时，它的key值就是enter。
在这里插入图片描述

所以我们只要在fn方法里加上一个对key值的判断，就能实现我们只有输入Enter时才打印这一事件

fn(e){if(e.key === "Enter"){console.log("键盘回车时触发", this.username);  }
}

所以在@keyup后面加上一个.enter就相当于外层加了一个判断，将它封装好了，所以修饰符就是在我们使用的时候帮助我们进行了一些小的封装，来帮我们简化代码。

其他更多的指令修饰符也可以在接下来写代码的过程中一步步去尝试。

结语

本次分享就到这里了，感谢小伙伴的浏览，如果有什么建议，欢迎在评论区留言，如果给小伙伴们带来了一些收获，请留下你的小赞，你的点赞和关注将会成为博主分享每日学习的动力。

指令的修饰符

指令的修饰符参考文献： Vue的快速上手 Vue指令上 Vue指令下 Vue指令的综合案例文章目录指令的修饰符指令修饰符结语博客主页: He guolin-CSDN博客关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力&…...

编程日记 2025/1/13 5:25:53

C# 正则表达式完全指南

C# 正则表达式完全指南 C#通过 System.Text.RegularExpressions 命名空间提供强大的正则表达式支持。本指南将详细介绍C#中正则表达式的使用方法、性能优化和最佳实践。 1. 基础知识 1.1 命名空间导入 using System.Text.RegularExpressions;1.2 基本使用 public class Re…...

编程日记 2025/1/13 5:24:50

【笔记整理】记录参加骁龙AIPC开发者技术沙龙的笔记

AIoT 首先了解了一个概念叫AIoT，我的理解就是AI IoT 5G，通过AI的发展使得边缘计算、数据整合和处理变得快捷方便，不仅限于传统的云端数据处理，在边缘的IoT设备上也可以进行智能化打造，通过5G的通信能力扩展可以实现…...

编程日记 2025/1/13 5:23:49

论文解析 | 基于语言模型的自主代理调查

论文《A Survey on Large Language Model-based Autonomous Agents》对基于大型语言模型（LLM）的自主智能体（Autonomous Agents）进行了全面调查。随着大型语言模型（如 GPT 系列、BERT、T5 等）的快速发展&a…...

编程日记 2025/1/13 5:21:47

面试加分项：Android Framework AMS 全面概述和知识要点

第一章：AMS 的架构与组件 1.1 AMS 整体架构在 Android 系统的庞大体系中，AMS（Activity Manager Service）就如同一个中枢神经系统，是整个系统的核心服务之一，对应用的性能和用户体验有着直接且关键的影响。它的整体架构由 Client 端和 Service 端两大部分组成，这两端相…...

编程日记 2025/1/13 5:20:47

EasyCVR视频汇聚平台如何配置webrtc播放地址？

EasyCVR安防监控视频系统采用先进的网络传输技术，支持高清视频的接入和传输，能够满足大规模、高并发的远程监控需求。平台支持多协议接入，能将接入到视频流转码为多格式进行分发，包括RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、W…...

编程日记 2025/1/13 5:16:42

用户界面软件04

后果使用这种架构很容易对两个层面的非功能性需求进行优化，但是你仍然需要小心不要将功能需求重复实现。现在，两个层面可能有完全不同的设计。比如，用户界面层可能使用配件模型（Widget Model）， 以大量的…...

编程日记 2025/1/13 5:12:39

C#，数值计算，矩阵相乘的斯特拉森（Strassen’s Matrix Multiplication）分治算法与源代码

Volker Strassen 1 矩阵乘法矩阵乘法是机器学习中最基本的运算之一，对其进行优化是多种优化的关键。通常，将两个大小为N X N的矩阵相乘需要N^3次运算。从那以后，我们在更好、更聪明的矩阵乘法算法方面取得了长足的进步。沃尔克斯特拉森于1…...

编程日记 2025/1/13 5:06:32

linux:文件的创建/删除/复制/移动/查看/查找/权限/类型/压缩/打包

关于文件的关键词创建 touch 删除 rm 复制 cp 权限 chmod 移动 mv 查看内容 cat(全部); head(前10行); tail(末尾10行); more,less 查找 find 压缩 gzip ; bzip 打包 tar 编辑 sed 创建文件格式： touch 文件名删除文件复制文件移动文件查看文…...

编程日记 2025/1/13 5:01:28

SQL Server查询计划操作符——查询计划相关操作符（3）

7.3. 查询计划相关操作符 19）Collapse：该操作符对更改处理进行优化。当执行一个更改时，其能被劈成（用Split操作符）一个删除和一个插入。其参数列包含一个确定一系列键值字段的GROUP BY:()子句。如果查询处理器遇到删除和插入相同键值的毗邻行，其将用一个更高效的更改操作…...

编程日记 2025/1/13 4:58:25

【Notepad++】Notepad++如何删除包含某个字符串所在的行

Notepad如何删除包含某个字符串所在的行一，简介二，操作方法三，总结一，简介在使用beyoundcompare软件进行对比的时候，常常会出现一些无关紧要的地方，且所在行的内容是变化的，不方便进行比较&…...

编程日记 2025/1/13 4:56:23

Android 来电白名单只允许联系人呼入电话

客户需求只允许通讯录中联系人可以呼入电话。参考自带的黑名单实现 CallsManager.java类中的onSuccessfulIncomingCall方法有一些过滤器，可以仿照黑名单的方式添加自己的过滤器。 packages/services/Telecomm/src/com/android/server/telecom/CallsManager.java …...

编程日记 2025/1/13 4:55:19

【计算机网络】lab3 802.11 （无线网络帧）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1. 前言 2.…...

编程日记 2025/1/13 4:53:16

单片机（MCU）-简单认识

简介： 内部集成了CPU，RAM，ROM，定时器，中断系统，通讯接口等一系列电脑的常用硬件功能。单片机的任务是信息采集（依靠传感器），处理（依靠CPU）&…...

编程日记 2025/1/13 4:52:15

全面教程：Nacos 2.3.2 启用鉴权与 MySQL 数据存储配置

全面教程：Nacos 2.3.2 启用鉴权与 MySQL 数据存储配置 1. 配置 Nacos 开启鉴权功能 1.1 修改 application.properties 配置文件在 Nacos 2.3.2 中，开启鉴权功能需要修改 conf/application.properties 文件。按照以下方式配置： # 开启鉴权…...

编程日记 2025/1/13 4:46:08

软件23种设计模式完整版[附Java版示例代码]

一、什么是设计模式设计模式是在软件设计中反复出现的问题的通用解决方案。它们是经过多次验证和应用的指导原则，旨在帮助软件开发人员解决特定类型的问题，提高代码的可维护性、可扩展性和重用性。设计模式是一种抽象化的思维方式，可以帮助开发人员更好地组织和设计他们…...

编程日记 2025/1/13 4:45:07

国标GB28181-2022视频平台EasyGBS小知识：局域网ip地址不够用怎么解决？

在局域网中，IP地址不足的问题通常不会在小型网络中出现，但在拥有超过255台设备的大型局域网中，就需要考虑如何解决IP地址不够用的问题了。在企业局域网中，经常会出现私有IP地址如192.168.1.x到192.168.1.255不够用的情况。由于0…...

编程日记 2025/1/13 4:40:01

PHP 循环控制结构深度剖析：从基础到实战应用

PHP 循环控制结构深度剖析：从基础到实战应用 PHP提供了多种控制结构，其中循环控制结构是最常见的结构之一。它们使得我们能够高效地重复执行一段代码，直到满足某个条件为止。本文将从PHP循环的基础知识出发，逐步分析其在实际项目…...

编程日记 2025/1/13 4:39:00

vue的属性绑定

重建一个新的项目 App.vue main.js HelloWorld.vue 属性绑定双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令 <template><div v-bind:id"dynamicId" v-bind:class"dynamicClass">…...

编程日记 2025/1/13 4:37:59

FFmpeg音视频流媒体，视频编解码性能优化

你是不是也有过这样一个疑问：视频如何从一个简单的文件变成你手机上快速播放的短片，或者是那种占满大屏幕的超高清大片？它背后的法宝，离不开一个神奇的工具——FFmpeg！说它强大，完全不为过，它在…...

编程日记 2025/1/13 4:36:58

16_Redis Lua脚本

Redis Lua脚本是Redis提供的一种强大的扩展机制。 1.Redis Lua脚本介绍 1.1 基本概念 Redis Lua脚本允许开发者将一段Lua语言编写的代码发送给Redis服务器执行。这项功能自Redis 2.6版本引入以来，为用户提供了强大的灵活性和扩展能力，使得可以在Redis内部直接处理复杂的业…...

编程日记 2025/1/13 4:28:48

Redis为 List/Set/Hash 的元素设置单独的过期时间

一.业务简介我们知道，Redis 里面暂时没有接口给 List、Set 或者 Hash 的 field 单独设置过期时间，只能给整个列表、集合或者 Hash 设置过期时间。这样，当 List/Set/Hash 过期时，里面的所有 field 元素就全部过期了。但这样并不…...

编程日记 2025/1/13 4:24:43

1、ui Stack() {Row() {ForEach([1, 2, 3, 4], (item: number) > {Text().width(3).height(20).backgroundColor(Color.Black).margin(item 2 ? { left: 8 } : item 3 ? { left: 7 } : { left: 0 })})}.width(97%).justifyContent(FlexAlign.SpaceBetween).padding({ ri…...

编程日记 2025/1/13 4:22:41

指令的修饰符

文章目录

指令修饰符

结语

相关文章：