Vue3学习日记(day5)

接下来我们继续探讨文档


event对象

在Vue.js中,$event变量或箭头函数中的event参数用于捕获原始的DOM事件对象。这个对象包含了所有与特定事件相关的信息,比如鼠标点击的位置、键盘按键的键码、触摸事件的触摸点等。

当你在事件处理器中需要做一些基于事件本身的处理时,如阻止默认行为(event.preventDefault())、停止事件传播(event.stopPropagation())、检查事件的详细信息等,就需要使用这个事件对象。

如果不传递event,你将无法访问这些功能。例如,如果你有一个表单提交按钮,你可能希望在警告用户之前阻止表单的默认提交行为。如果没有event参数,你就不能调用preventDefault(),这可能会导致页面刷新,即使你正在尝试警告用户。

<template>
  <form @submit="onSubmit">
    <input type="text" placeholder="Type something...">
    <button>Submit</button>
  </form>
</template>
export default {
  methods: {
    onSubmit(event) {
      event.preventDefault(); // 阻止表单的默认提交行为
      console.log('Form submitted');
      console.log('Input value:', document.querySelector('input').value);
    }
  }
}

事件修饰符

对于子元素父元素有重叠风险的:

1. .stop

假设你有一个父元素和一个子元素,当你点击子元素时,你希望只触发子元素的事件处理器,而不触发父元素的处理器。

<div id="parent" @click="logParentClick">
2  Parent element
3  <button id="child" @click.stop="logChildClick">Click me!</button>
4</div>
new Vue({
  el: '#app',
  methods: {
    logParentClick() {
      console.log('Parent clicked');
    },
    logChildClick() {
      console.log('Child clicked');
    }
  }
});

在这个例子中,当你点击按钮时,只会输出 "Child clicked",而不会输出 "Parent clicked"。这是因为.stop修饰符阻止了点击事件从子元素传递到父元素。

2. .prevent

假设你有一个表单,当用户提交表单时,你不希望页面刷新,而是显示一条消息。

<form @submit.prevent="logFormSubmit">
  <input type="text" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>
new Vue({
  el: '#app',
  methods: {
    logFormSubmit() {
      console.log('Form submitted');
    }
  }
});

在这个例子中,当你提交表单时,页面不会刷新,而是输出 "Form submitted" 到控制台。这是因为.prevent修饰符阻止了表单的默认提交行为。

3. .self

假设你有一个父元素和一个子元素,当你点击子元素时,你希望事件处理器只在点击父元素本身时才被触发。

<div id="parent" @click.self="logParentClick">
  Parent element
  <button id="child" @click="logChildClick">Click me!</button>
</div>
new Vue({
  el: '#app',
  methods: {
    logParentClick() {
      console.log('Parent clicked');
    },
    logChildClick() {
      console.log('Child clicked');
    }
  }
});

在这个例子中,当你点击按钮时,只会输出 "Child clicked",而不会输出 "Parent clicked"。这是因为.self修饰符确保事件处理器只在点击父元素本身时才被触发。


透传值

(这个我不是特别了解,所以做了案例)

子组件
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  buttonText: String,
  customClass: String,
});
</script>

<template>
  <button :class="[customClass, 'base-button']">
    {{ buttonText }}
  </button>
</template>

<style scoped>
.base-button {
  background-color: red;
}
</style>
父组件
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <HelloWorld
    :buttonText="'传递'"
    :customClass="'large-button'"
  ></HelloWorld>
</template>

<style scoped>
.large-button {
  font-size: 22px;
}
</style>

效果:

成功传递

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/728851.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端时钟页面(JSP语言)

前端时钟页面(JSP语言) 一、效果图 二、介绍 1.目前市面上很多时钟组件&#xff0c;像电子时钟&#xff0c;3D时钟&#xff0c;Echarts画的时钟 2.这款时钟&#xff0c;是本人多年前寻找并修改的&#xff0c;感觉效果还不错 3.目前这是jsp写的&#xff0c;后面有时间会用Vue写…

口罩佩戴智能监测摄像机

智能监测摄像机在现代城市安全管理中扮演着关键角色&#xff0c;尤其是像口罩佩戴智能监测摄像机这样的设备&#xff0c;其应用正在日益扩展&#xff0c;对于公共卫生和安全至关重要。 这类摄像机利用先进的图像识别技术&#xff0c;能够实时监测人群中是否佩戴口罩。通过高精度…

CVPR2023论文速览Scenes相关49篇

CVPR2023论文速览Scenes Paper1 CLIP2Scene: Towards Label-Efficient 3D Scene Understanding by CLIP 摘要原文: Contrastive Language-Image Pre-training (CLIP) achieves promising results in 2D zero-shot and few-shot learning. Despite the impressive performance …

05. Java多线程 join 方法

1. 前言 本节对 join 方法进行深入的剖析&#xff0c;主要内容点如下&#xff1a; 了解 join 方法的作用&#xff0c;初步的理解 join 方法的使用带来的效果是学习本节内容的基础&#xff1b;了解 join 方法异常处理&#xff0c;我们在使用 join 方法是&#xff0c;需要对 jo…

【odoo】常用的字符转义:“>“,“<“,““,“/“等

概要 字符转义是指在编写代码或处理文本数据时&#xff0c;将特殊字符转换为另一种形式&#xff0c;以便在特定的上下文中正确解析和处理这些字符。 内容 特殊字符描述XML转义表示法&和符号&amp;<小于符号<>大于符号>"双引号&quot;单引号&ap…

优惠卷秒杀(并发问题)

Redis实战篇 | Kyles Blog (cyborg2077.github.io) 目录 一、Redis实现全局唯一id 二、添加优惠卷 三、实现秒杀下单 四、解决超卖问题&#xff08;库存为负&#xff09; 乐观锁解决超卖问题&#xff08;CAS法&#xff09; 五、实现一人一单 ​编辑 悲观锁解决一人一单问题…

C++ 教程 - 05 构建编译

文章目录 构建工具cmake安装与使用CMakeLists.txt编写使用案例 构建工具 cmake, Cross Platform Make&#xff0c; &#xff08;对C&#xff09;跨平台编译工具&#xff0c;将CMakeLists.txt 文件编译为对应的文件&#xff0c;如linux下的 Makefile&#xff0c;然后使用make命…

这几个都秒懂的都是资深程序猿/媛了吧?

放松第三期下&#xff0c;不讲编程技术&#xff0c;来看看几个冷笑话&#xff0c;最后一个最近还真的遇到了T_T ......想知道有多少人是秒懂的&#xff0c;欢迎大家在评论区交流讨论分享自己身边的搞笑趣事。 大家身边还有什么搞笑趣事呢&#xff1f;欢迎评论区留言交流分享&am…

收银系统源码推荐,线下线上一体化收银系统

1.收银系统源码开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后台管理网站: HTML5vue2.0element-uicssjs收银端【安卓/PC收银】: Dart3&#xff0c;框架&#xff1a;Flutter 3.11.0-6.0.pre.27商家小程序助手端: uniapp线上商城: uniapp 2.功能介绍 支持测试体验…

SARscape——Refined Lee滤波

目录 一、算法原理1、概述2、参考文献 二、软件操作三、结果展示1、原始图像2、滤波结果 一、算法原理 1、概述 精致Lee滤波通过定义8种非正方形局部窗口&#xff0c;将均匀区域像素值等于其平均值&#xff0c;将非均匀区域近似于局部窗口中心像素值。 精致 Lee 滤波 8 种模板…

C#调用OpenCvSharp和SkiaSharp绘制图像直方图

最近在B站上学习OpenCv教程&#xff0c;学到图像直方图&#xff0c;后者描述的是不同色彩在整幅图像中所占的比例&#xff08;统计不同色彩在图像中的出现次数&#xff09;&#xff0c;可以对灰度图、彩色图等计算并绘制图像直方图。本文学习OpenCvSharp中与计算直方图相关的函…

全志 Android 11:实现响应全局按键

一、篇头 最近实现热键想功能&#xff0c;简单总结了下全志平台Android 11 的响应全局热键的方法。 二、需求 实现全局热键&#xff0c;响应F-、AF、F三个按键&#xff0c;AF只用于启动调焦界面&#xff0c;F-和F除了可以启动调焦界面外&#xff0c;还用于调整镜头的焦距&…

锂电池寿命预测 | Matlab基于ARIMA的锂电池寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于ARIMA的锂电池寿命预测 NASA数据集&#xff0c;B0005号电池&#xff0c;选择前110个数据训练&#xff0c;后58个数据测试预测。程序包含去趋势线、差分、平稳化及AIC准则判定p和q。命令窗…

幂集000

题目链接 幂集 题目描述 注意点 集合中不包含重复的元素 解答思路 可以使用深度优先遍历的思想按顺序将相应的元素添加到子集中&#xff0c;并将每个子集添加到结果集 代码 class Solution {public List<List<Integer>> subsets(int[] nums) {List<List&…

openGauss安装流程2024

openGauss安装流程2024 报错解决&#xff1a;https://blog.csdn.net/weixin_47115107/article/details/139844012?spm1001.2014.3001.5501 openGauss安装 之后安装过程中openGauss用户互信&#xff0c;openEuler服务器需要用到Python-3.7.x命令&#xff0c;但是默认Python版…

GNSS边坡监测站

TH-WY1随着科技的飞速发展&#xff0c;各种先进的监测技术不断涌现&#xff0c;为边坡安全监测提供了有力保障。其中&#xff0c;GNSS边坡监测站以其高精度、实时性强的特点&#xff0c;受到了广泛关注。 GNSS边坡监测站&#xff0c;全称为全球导航卫星系统边坡监测站&#xf…

掌握心理学知识成为产品经理一门必修课?

文章目录 心理学与产品设计的关联关系产品经理需要学习哪些心理学知识产品心理学的学习对象包含哪些 谈及心理学&#xff0c;往往认为它是一门研究人类心理现象及其影响下的精神功能和行为活动的科学&#xff0c;很多情况下&#xff0c;我们的直观印象是把心理学与医学领域进行…

代码随想录刷题复习day01

day01 数组-二分查找 class Solution {public int search(int[] nums, int target) {// 左闭右闭int left 0;int right nums.length - 1;int mid 0;while (right > left) {mid left (right - left) / 2;if (nums[mid] > target)right mid - 1;else if (nums[mid]…

HoVer-Net复现:手把手带你实现细胞核的分割与分类,并输出叠加图像|24-06-21

小罗碎碎念 先说一下&#xff0c;只要你跟着我一步一步走&#xff0c;你能实现的效果——对细胞核进行分割和分类&#xff0c;并在原始图像上以颜色叠加的方式直观地展示这些结果。 昨天我在交流群里进行了一下预热&#xff0c;并且提供了一些前期的教程&#xff0c;反响还不…

会声会影2024专业免费版下载附带激活码序列号

&#x1f31f; 会声会影2024&#xff1a;你的视频编辑新伙伴&#xff01;大家好&#xff0c;今天来给你们安利一个超级棒的视频编辑软件——会声会影2024最新版本&#xff01;作为一位热爱创作的小伙伴&#xff0c;找到一款既强大又易用的视频编辑工具真的太重要了。而会声会影…