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

指令的修饰符

news 2026/2/11 1:30:03

指令的修饰符

参考文献：
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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...

编程新知 2025/9/21 0:49:02

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2026/2/8 4:08:40

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2026/1/24 19:22:03

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2026/2/3 8:20:06

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

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

编程新知 2026/1/28 8:25:28

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现第一章需求分析 1.1 需求总体介绍本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...

编程新知 2026/1/25 10:12:06

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

指令的修饰符

文章目录

指令修饰符

结语

相关文章：