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

Vue新手村（二）

news 2026/5/13 22:04:54

目录

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

如何利用Deep SORT实现稳定高效的多目标追踪

如何利用Deep SORT实现稳定高效的多目标追踪 【免费下载链接】deep_sort Simple Online Realtime Tracking with a Deep Association Metric 项目地址: https://gitcode.com/gh_mirrors/de/deep_sort 在计算机视觉的实际应用中&#xff0c;多目标追踪一直是一个技术难点…...

编程新知 2026/5/13 21:06:16

开源技能管理工具rei-skills：从零构建个人技术能力图谱

1. 项目概述与核心价值 最近在折腾个人知识库和技能树管理&#xff0c;发现了一个挺有意思的开源项目 rootcastleco/rei-skills 。这项目名字乍一看有点神秘&#xff0c; rei 在日语里是“零”或“灵”的意思&#xff0c;结合 skills &#xff0c;我理解它想表达的是一种…...

编程新知 2026/5/13 21:04:16

安全生产隐患识别太难？实测实在Agent：AI模型语义分析能力测评详解与信创落地指南

摘要&#xff1a; 步入2026年&#xff0c;安全生产已进入“全量数字化”与“法制化”深度融合的高压期。随着《安全生产法》的持续深化执行&#xff0c;企业面临着海量隐患识别、跨系统数据流转及信创环境适配的三重挑战。传统的人工排查与基于API的自动化手段&#xff0c;在面…...

编程新知 2026/5/13 20:58:08

VSCode + GitLab 真香组合：告别命令行恐惧，可视化搞定团队代码提交与合并

VSCode GitLab 可视化协作指南&#xff1a;零命令行完成高效团队开发 对于视觉型开发者而言&#xff0c;命令行操作常常是学习Git工作流的最大障碍。当团队采用GitLab进行协作时&#xff0c;传统教程中频繁出现的git checkout、git rebase等命令更容易让人望而生畏。事实上&a…...

编程新知 2026/5/13 20:43:13

AI Agent社区平台架构实战：React 19 + Cloudflare边缘计算全栈开发

1. 项目概述&#xff1a;一个为AI Agent时代设计的社区平台如果你最近在折腾AI Agent&#xff0c;或者想找一些靠谱的AI工具&#xff0c;那你可能已经发现了一个痛点&#xff1a;信息太散了。教程、工具推荐、硬件配置、社区交流&#xff0c;这些内容散落在各个论坛、博客和社交…...

编程新知 2026/5/13 20:05:36

基于Lepton AI构建对话式搜索引擎：RAG技术实践指南

1. 项目概述&#xff1a;用Lepton AI构建你的对话式搜索引擎 如果你对AI应用开发感兴趣&#xff0c;尤其是想快速搭建一个能理解自然语言、并能联网搜索的智能助手&#xff0c;那么“Search with Lepton”这个项目绝对值得你花时间研究。它本质上是一个开源的对话式搜索引擎框…...

编程新知 2026/5/13 19:44:00

2026届必备的六大AI辅助写作网站横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 现今&#xff0c;各类数字化内容的AI生成痕迹核验标准不断持续迭代&#xff0c;多数内容创作…...

编程新知 2026/5/13 17:25:38

AI 搜索重新重视来源：内容平台的新机会不是被点击，而是被正确引用

生成式搜索刚出现时&#xff0c;很多内容创作者最担心的问题是&#xff1a;如果答案直接出现在搜索页&#xff0c;用户还会不会点进原文&#xff1f;这个担心并不多余。AI Overviews、AI Mode 和各类答案引擎&#xff0c;确实改变了“搜索结果页到网页”的传统路径。但现在更值…...

编程新知 2026/5/13 15:46:06

5种智能匹配模式：Illustrator脚本replaceItems.jsx如何让设计元素替换效率提升20倍

5种智能匹配模式&#xff1a;Illustrator脚本replaceItems.jsx如何让设计元素替换效率提升20倍 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 在Adobe Illustrator设计工作中&…...

编程新知 2026/5/13 15:28:51

Stata 数据处理实战：时间序列数据的日期转换与聚合

1. 时间序列数据处理的常见痛点 刚接触时间序列分析的朋友们&#xff0c;经常会遇到这样的困扰&#xff1a;从Excel导入的数据明明是日期格式&#xff0c;到了Stata里却变成了看不懂的字符&#xff1b;想按周汇总销售数据&#xff0c;却发现系统根本不认识"2023-W15"…...

编程新知 2026/5/13 15:18:09