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

指令的修饰符

news 2026/2/8 12:25:33

指令的修饰符

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

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32