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

Vue新手村（二）

news 2025/9/12 1:57:15

1、计算属性

2、事件修饰符

2.1、stop事件修饰符

2.2、prevent事件修饰符

2.3、self事件修饰符

2.4、once事件修饰符

3、按键修饰符

3.1、enter回车键

1、计算属性

计算属性：

computed：vue官方提供一个计算属性
作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算
好处：在完成计算同时也会将计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次
使用：{{ }}，在里面填写方法名即可

代码举例：

<!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"><h1>{{count}}</h1><h2>总数：{{test2}}</h2><h2>总数：{{test2}}</h2><h2>总数：{{test2}}</h2></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue ({el:"#app",data:{count:1},methods:{test() {}},computed:{test2() {console.log("调用了computed方法")return 3*this.count}}})
</script>

重点代码:

效果：

2、事件修饰符

修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制~

2.1、stop事件修饰符

.stop：用来阻止事件冒泡

<!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"><!-- 对冒泡事件不处理 --><div style="width: 200px;;height: 200px;background-color:red;" @click="parent"><div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div></div><hr><!-- 阻止事件冒泡了 --><div style="width: 200px;;height: 200px;background-color:red;" @click="parent"><div style="width: 100px;;height: 100px;background-color:blue;" @click.stop="child"></div></div></div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#app",data:{},methods:{parent() {alert('parent')},child() {alert('child')}}})
</script>

主要代码：

效果：

当你点击第一个父div下的子div时，会连续有两个alert弹框，这就叫做冒泡
当你点击第二个父div下的子div时，只会有一个alert弹框，这就是阻止了冒泡

2.2、prevent事件修饰符

.prevent：用来阻止标签的默认行为

主要代码：

没有添加.prevent时，点击后，会有alert弹框，然后跳转至百度。当我们不想让他执行默认行为（跳转）时，就可以使用.prenvent来控制

2.3、self事件修饰符

.self：用来针对当前标签的事件触发——只触发自己标签上的特定动作，只关心自己标签上触发的事件，不监听事件冒泡

主要代码：

此时，我们点击子div，也不会触发父div的alert，因为添加了.self，他只关心自己标签上的事件

2.4、once事件修饰符

.once：一次作用——就是让指定事件只触发一次

主要代码：

不管是点击子div，冒泡触发的，还是点击父div自己触发的，一共只触发一次~

3、按键修饰符

作用：用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符

例如下面的例子【其他：.tab .delete .esc .space .up .down .left .right】

3.1、enter回车键

enter回车回车键修饰符，用来在触发回车按键之后触发的事件

主要代码：

如上述，我们enter后就会触发提交函数

好啦，我们先学到这里哦，下期继续

Vue新手村（二）

目录 1、计算属性 2、事件修饰符 2.1、stop事件修饰符 2.2、prevent事件修饰符 2.3、self事件修饰符 2.4、once事件修饰符 3、按键修饰符 3.1、enter回车键 1、计算属性计算属性： computed：vue官方提供一个计算属性作用：在完成某种业…...

编程日记 2024/1/15 12:08:28

Mysql-redoLog

Redo Log redo log进行刷盘的效率要远高于数据页刷盘，具体表现如下 redo log体积小，只记录了哪一页修改的内容，因此体积小，刷盘快 redo log是一直往末尾进行追加，属于顺序IO。效率显然比随机IO来的快Redo log 格式在MySQL的InnoDB存储引擎中，redo log（重做日志）被用…...

编程日记 2024/1/15 12:06:26

编程笔记 html5cssjs 039 CSS背景示例

编程笔记 html5&css&js 039 CSS背景示例一、html二、css小结网页上只有三个水平并列大小相同的的DIV，大小为300p*200,如何使用CSS让它们整体水平和垂直都居中，并使用不同的背景色？ 一、html 要在网页上实现三个水平并列且大小相同…...

编程日记 2024/1/15 12:05:25

沃尔玛如何通过安全、有效的测评补单提升产品权重？

在沃尔玛的众多卖家之中，如何让自己脱颖而出？这不仅需要我们提供具有竞争力的价格，更需要我们提升产品的评分和权重。要让更多的客户注意到我们的产品，补单测评或许是一种有效的策略。尤其在新品上架初期，由于缺乏好评…...

编程日记 2024/1/15 12:03:23

「典型安全漏洞系列」03.跨站请求伪造CSRF详解

引言：CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种攻击技术，通过使用用户的身份进行不诚实地操作，恶意用户可以在受害者（目标）的机器上执行一些未授权的操作。这可能会危及…...

编程日记 2024/1/15 12:00:21

区间合并（pair，auto的用法）

给定 n 个区间 [li,ri]，要求合并所有有交集的区间。注意如果在端点处相交，也算有交集。输出合并完成后的区间个数。例如：[1,3] 和 [2,6] 可以合并为一个区间 [1,6]。输入格式第一行包含整数 n。接下来 n行，每行包含两…...

编程日记 2024/1/15 11:57:18

Java零基础教学文档第四篇：HTML_CSS_JavaScript（2）

【HTML】【主要内容】WEB: 1．Web前端简介 2．创建第一个前端项目 3．相关标签详解 4．表格标签详解 5．表单标签详解 6．框架和实体字符【学习目标】 1. Web前端简介 1.1 为什么要学习Web前端&#…...

编程日记 2024/1/15 11:56:17

2024 年 Linux 和开源的六大趋势预测

文章地址：观点|2024 年 Linux 和开源的六大趋势预测让我们尝试预测未来吧！ 新的一年快乐，朋友们 ✨ 2024 年的钟声已经敲过，我们有必要去预见一下将塑造本年度的各种潮流。我们不能预见未来，所以无法精确预知将会发…...

编程日记 2024/1/15 11:55:16

揭秘小米手机被疯狂吐槽的存储扩容技术

前段时间，在小米14的发布会上，雷布斯公布了名为“Xiaomi Ultra Space存储扩容”的技术，号称可以在512G的手机中再搞出来16G，256G的手机中再搞出8G。对于普通用户来说，能多得一些存储空间，无异是个很好的福利…...

编程日记 2024/1/15 11:54:15

Flutter 小技巧之升级适配 Xcode15

美好的 2024 从「适配」开始，按照苹果的尿性，2024 春季开始大家将不得使用 Xcode15 来构建 App ，另外根据《2024 的 iOS 的隐私清单》要求，使用 Flutter 的开发者是无法逃避适配 Xcode15 更新的命运。另外，众所周知…...

编程日记 2024/1/15 11:53:14

杨中科 .NETCORE 异步编程

一、为什么需要异步编程异步点餐的优点：能同时服务多个客人异步点餐一定会提升单个客户点餐速度吗？ 答案理所当然：不能图片美化服务例子服务器能够同时服务的请求数量有限 void BeautifyPic (File photo, Response response) {byte[] …...

编程日记 2024/1/15 11:51:13

Rust-函数

简介 Rust的函数使用关键字fn开头。函数可以有一系列的输入参数，还有一个返回类型。函数体包含一系列的语句(或者表达式)。函数返回可以使用return语句，也可以使用表达式。 Rust编写的可执行程序的入口就是fn main()函数。以下是一个函数的示例…...

编程日记 2024/1/15 11:50:12

【java八股文】之分布式系列篇

【java八股文】之MYSQL基础篇-CSDN博客【java八股文】之JVM基础篇-CSDN博客【java八股文】之Redis基础篇-CSDN博客【java八股文】之Spring系列篇-CSDN博客【java八股文】之分布式系列篇-CSDN博客【java八股文】之Java基础篇-CSDN博客【java八股文】之多线程篇-CSDN…...

编程日记 2024/1/15 11:49:11

【CSCV】划分数据集

参考论文IEEE Xplore Full-Text PDF: 划分数据集时多了一个development set，如下图先占个坑，看完论文再来填坑...

编程日记 2024/1/15 11:48:10

【面试合集】说说提高微信小程序的应用速度的手段有哪些？

面试官：说说提高微信小程序的应用速度的手段有哪些？ 一、是什么小程序启动会常常遇到如下图场景： 这是因为，小程序首次启动前，微信会在小程序启动前为小程序准备好通用的运行环境，如运行中的线程和一些基…...

编程日记 2024/1/15 11:47:09

uniapp——自定义导航栏的封装

为什么需要封装自定义导航首先如果开发的是微信小程序，那么在安卓环境下导航栏标题是默认靠左对齐的（虽然你在微信开发者工具上看到的依旧是居中展示），而在ios环境则是居中展示的。很多时候我们需要对整个项目有一个主题色或者公…...

编程日记 2024/1/15 11:46:08

Halcon机器视觉和运动控制软件通用框架，24年1月最新版新增UI设计器，插件式开发，开箱即用仅供学习！

24年1月更新下载点我此版本已经添加ui设计器。具体功能如上所示，可以自定义变量，写c#脚本，自定义流程，包含了halcon脚本和封装的算子，可自定义ui，通过插件形式开发很方便拓展自己的功能。 ui设计器...

编程日记 2024/1/15 11:45:07

WebGL简介以及使用

WebGL简介 WebGL（Web图形库） 是一种在没有使用插件的情况下在网页浏览器中渲染2D图形和3D图形的技术。它基于OpenGL ES，一个在嵌入式系统中广泛使用的图形API。WebGL通过HTML5的 <canvas> 元素直接在网页上实现图形渲染，使…...

编程日记 2024/1/15 11:44:06

导轨式信号隔离变送器比例阀门线性驱动器4-20mA/0-5V/0-10V转0-165mA/0-80mA/0-1A/0-2A/0-4A

主要特性精度、线性度误差等级： 0.1、0.2、0.5 级4-20mA/0-5V/0-10V 等标准信号输入0~100mA/0~500mA/0~1A/0-5A 等电流信号输出0~1V(max 2A)/0~10V/0-24V(max 5A) 等电压信号输出信号输入/信号输出 3000VDC 隔离辅助电源：12V、15V 或 24V 直流单电源供…...

编程日记 2024/1/15 11:43:05

Windows：win11不同分辨率2块屏幕在扩展模式下小屏上边有黑边

摘要：电脑只有一个核显时，Windows11系统在扩展模式下接入2块不同大小的分辨率的显示器，设置高分辨率显示器为主显示器。这时低分辨显示器系统可以正确设置分辨率，但是在低分率显示器上边出现较宽黑边，通过手工在显示设…...

编程日记 2024/1/15 11:41:02

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/9/11 16:48:32

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/9/10 18:25:25

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/9/11 12:54:47

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务三、…...

编程新知 2025/8/28 7:47:23

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪宝可梦GO游戏自组网系统

目录游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法安全性设计技术选…...

编程新知 2025/8/29 0:20:47

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度五、实际案例大…...

编程新知 2025/7/25 14:20:29

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/7/7 0:35:57

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...

编程新知 2025/8/25 19:51:15