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

指令的修饰符

news 2025/12/25 17:02:34

指令的修饰符

参考文献：
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就相当于外层加了一个判断，将它封装好了，所以修饰符就是在我们使用的时候帮助我们进行了一些小的封装，来帮我们简化代码。

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

结语

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

相关文章：

指令的修饰符

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

编程日记 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&#xff0c;我的理解就是AI IoT 5G&#xff0c;通过AI的发展使得边缘计算、数据整合和处理变得快捷方便&#xff0c;不仅限于传统的云端数据处理&#xff0c;在边缘的IoT设备上也可以进行智能化打造&#xff0c;通过5G的通信能力扩展可以实现…...

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

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

论文 《A Survey on Large Language Model-based Autonomous Agents》 对基于大型语言模型&#xff08;LLM&#xff09;的自主智能体&#xff08;Autonomous Agents&#xff09;进行了全面调查。随着大型语言模型&#xff08;如 GPT 系列、BERT、T5 等&#xff09;的快速发展&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安防监控视频系统采用先进的网络传输技术&#xff0c;支持高清视频的接入和传输&#xff0c;能够满足大规模、高并发的远程监控需求。平台支持多协议接入&#xff0c;能将接入到视频流转码为多格式进行分发&#xff0c;包括RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、W…...

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

用户界面软件04

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

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

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

Volker Strassen 1 矩阵乘法 矩阵乘法是机器学习中最基本的运算之一&#xff0c;对其进行优化是多种优化的关键。通常&#xff0c;将两个大小为N X N的矩阵相乘需要N^3次运算。从那以后&#xff0c;我们在更好、更聪明的矩阵乘法算法方面取得了长足的进步。沃尔克斯特拉森于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 创建文件 格式&#xff1a; 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如何删除包含某个字符串所在的行 一&#xff0c;简介二&#xff0c;操作方法三&#xff0c;总结 一&#xff0c;简介 在使用beyoundcompare软件进行对比的时候&#xff0c;常常会出现一些无关紧要的地方&#xff0c;且所在行的内容是变化的&#xff0c;不方便进行比较&…...

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

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

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

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

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

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;计算机网络_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2.…...

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

单片机（MCU）-简单认识

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

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

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

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

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

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

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

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

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

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

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

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

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

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

vue的属性绑定

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

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

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

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

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/12/22 8:58:18

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/12/25 5:36:47

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/12/25 7:33:23

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/12/25 12:23:56

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/12/24 20:39:02

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/12/24 22:00:56

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

编程新知 2025/12/25 8:34:48