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

Vue新手村（二）

news 2026/3/27 4:45:18

目录

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、计算属性 计算属性&#xff1a; computed&#xff1a;vue官方提供一个计算属性作用&#xff1a;在完成某种业…...

编程日记 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&#xff0c;大小为300p*200,如何使用CSS让它们整体水平和垂直都居中&#xff0c;并使用不同的背景色&#xff1f; 一、html 要在网页上实现三个水平并列且大小相同…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flutter 小技巧之升级适配 Xcode15

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

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

杨中科 .NETCORE 异步编程

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

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

Rust-函数

简介 Rust的函数使用关键字fn开头。 函数可以有一系列的输入参数&#xff0c;还有一个返回类型。 函数体包含一系列的语句(或者表达式)。 函数返回可以使用return语句&#xff0c;也可以使用表达式。 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&#xff0c;如下图 先占个坑&#xff0c;看完论文再来填坑...

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

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

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

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

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

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

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

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

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

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

WebGL简介以及使用

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

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

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

主要特性 精度、线性度误差等级&#xff1a; 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 隔离辅助电源&#xff1a;12V、15V 或 24V 直流单电源供…...

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

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

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

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

开局掌控者：EdB Prepare Carefully - RimWorld自定义体验革命

开局掌控者&#xff1a;EdB Prepare Carefully - RimWorld自定义体验革命 【免费下载链接】EdBPrepareCarefully EdB Prepare Carefully, a RimWorld mod 项目地址: https://gitcode.com/gh_mirrors/ed/EdBPrepareCarefully 副标题&#xff1a;如何告别随机开局&#xf…...

编程新知 2026/3/27 4:21:50

用户缓冲区与内核缓冲区原理及应用解析

1. 用户缓冲区与内核缓冲区深度解析1.1 系统架构概述现代计算机系统采用分层架构设计&#xff0c;将运行环境划分为用户空间和内核空间两个关键区域。这种划分基于处理器提供的不同执行权限级别&#xff1a;用户空间&#xff1a;运行所有用户进程&#xff0c;包括应用程序、服务…...

编程新知 2026/3/27 3:59:38

【实战篇】OneWire时序精解：从复位脉冲到DS18B20温度读取

1. OneWire协议基础&#xff1a;单线通信的魔法 第一次接触OneWire&#xff08;单总线&#xff09;协议时&#xff0c;我盯着那根孤零零的信号线愣了半天——这根线既要供电又要传数据&#xff0c;还要协调多个设备&#xff0c;简直像用一根吸管同时喝奶茶、吃珍珠和传情书。但…...

编程新知 2026/3/27 3:17:02

智能家居控制中心：OpenClaw+Qwen3.5-9B语音指令中转

智能家居控制中心&#xff1a;OpenClawQwen3.5-9B语音指令中转 1. 为什么需要语音控制的智能家居中枢&#xff1f; 去年装修新房时&#xff0c;我装了十几款不同品牌的智能设备——从米家的灯泡到涂鸦的窗帘电机&#xff0c;再到HomeKit的温控器。每次想调整家居状态&#xf…...

编程新知 2026/3/27 3:05:01

AI 开发实战：给团队定一套能落地的 AI 使用规范

AI 开发实战&#xff1a;给团队定一套能落地的 AI 使用规范 一、为什么团队用了 AI 反而容易更乱&#xff1f; 因为每个人都在各自试&#xff1a; 有人用来写代码有人用来写文档有人用来查错有人输出直接复制上线 如果没有基本规范&#xff0c;效率可能提升了&#xff0c;但风险…...

编程新知 2026/3/27 2:12:41

解锁Ghidra：面向逆向工程师的二进制分析工具指南

解锁Ghidra&#xff1a;面向逆向工程师的二进制分析工具指南 【免费下载链接】ghidra_installer Helper scripts to set up OpenJDK 11 and scale Ghidra for 4K on Ubuntu 18.04 / 18.10 项目地址: https://gitcode.com/gh_mirrors/gh/ghidra_installer 剖析Ghidra核心…...

编程新知 2026/3/27 2:06:40

OpenClaw新手避坑指南：GLM-4.7-Flash部署的5个常见错误

OpenClaw新手避坑指南&#xff1a;GLM-4.7-Flash部署的5个常见错误 1. 为什么写这篇指南 上周我在自己的M1 MacBook上尝试部署OpenClaw对接GLM-4.7-Flash模型时&#xff0c;经历了堪称"教科书级"的踩坑过程。从模型地址格式错误到端口冲突&#xff0c;几乎把所有新…...

编程新知 2026/3/27 1:48:35

Teensy41嵌入式FTP服务器库：轻量协议栈与多网络适配

1. 项目概述FTP_Server_Teensy41 是一款专为 Teensy 4.x 系列微控制器&#xff08;特别是 Teensy 4.0 和 Teensy 4.1&#xff09;深度定制的嵌入式 FTP 服务器库。它并非从零构建&#xff0c;而是基于 Jean-Michel Gallego 开发的成熟开源项目 Arduino-Ftp-Server 进行了系统性…...

编程新知 2026/3/27 1:24:20

TSMaster与珠海创芯CAN卡的集成指南

1. 珠海创芯CAN卡与TSMaster的基础认知 第一次接触珠海创芯CAN卡时&#xff0c;我和很多工程师一样好奇&#xff1a;这个硬件到底有什么特别之处&#xff1f;实测下来发现&#xff0c;它最大的优势在于高性价比和兼容性。珠海创芯的CAN卡采用标准USB接口&#xff0c;支持CAN2.0…...

编程新知 2026/3/27 0:21:27

Boss-Key老板键：如何用3分钟掌握一键隐藏窗口的终极技巧

Boss-Key老板键&#xff1a;如何用3分钟掌握一键隐藏窗口的终极技巧 【免费下载链接】Boss-Key 老板来了&#xff1f;快用Boss-Key老板键一键隐藏静音当前窗口&#xff01;上班摸鱼必备神器 项目地址: https://gitcode.com/gh_mirrors/bo/Boss-Key 你是否经历过这样的时…...

编程新知 2026/3/26 23:14:54