vue3 修饰符大全(近万字长文)

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶专栏


文章目录

  • 系列文章目录
  • 前言
  • 一、事件修饰符(Event Modifiers)
    • 1、.stop(阻止事件冒泡)
    • 2、.prevent(阻止事件的默认行为)
    • 3、.capture(使用事件捕获模式)
    • 4、.self(只当事件在该元素本身(而不是子元素)触发时触发回调函数)
    • 5、.once(只触发一次回调函数)
  • 二、按键修饰符(Key Modifiers
    • 1、.enter(按下回车键时触发)
    • 2、.tab(按下tab键时触发)
    • 3、.delete(按下删除或退格键时触发)
    • 4、.esc(按下ESC键时触发)
    • 5、.space(按下空格键时触发)
    • 6、.up(按下上箭头键时触发)
    • 7、.down(按下下箭头键时触发)
    • 8、.left(按下左箭头键时触发)
    • 9、.right(按下右箭头键时触发)
  • 表单输入修饰符(Form Input Modifiers)
    • 1、.lazy(用于将输入事件延迟到change事件之后触发)
    • 2、.number(自动将输入值转为数字类型)
    • 3、.trim(自动去除输入值两端的空白字符)
  • 鼠标修饰符(Mouse Modifiers)
    • 1、.left(只在鼠标左键点击时触发)
    • 2、.right(只在鼠标右键点击时触发)
    • 3、.middle(只在鼠标中键点击时触发)
    • 3、.passive(指定事件监听器为被动模式,可以提升滚动性能)


前言

本文是为了系统性的了解vue3中的修饰符,方便开发时的使用,使用修饰符可以方便地对事件进行控制和处理,提升用户体验。


一、事件修饰符(Event Modifiers)

1、.stop(阻止事件冒泡)

修饰符.stop是用于阻止事件冒泡的。当一个具有.stop修饰符的事件监听器被触发时,该事件将不再向上冒泡到父元素。这意味着如果一个父元素和子元素都有相同类型的事件监听器,并且点击了子元素,那么只会触发子元素的事件监听器,父元素的事件监听器将被忽略。

例如,以下代码中的点击事件只会触发handleClick方法,而不会触发父元素的事件监听器。

<template>
  <div @click="handleClick">
    <button @click.stop="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

2、.prevent(阻止事件的默认行为)

.prevent是一个修饰符,用于事件处理函数中,阻止事件的默认行为。当事件触发时,浏览器会执行默认的操作,例如提交表单、打开链接等。而使用.prevent修饰符可以阻止这些默认的行为。

使用.prevent修饰符的方式是在事件处理函数的名称后面加上.prevent,例如:

<button @click.prevent="submitForm">提交表单</button>

在上述的代码中,当按钮被点击时,submitForm函数会被调用,同时会阻止表单的默认提交行为。

3、.capture(使用事件捕获模式)

.capture 是一个事件修饰符,用于监听一个元素的捕获阶段事件。

事件捕获是浏览器在事件传播过程中的第一个阶段,它从顶层元素向下传播到目标元素。而事件冒泡是事件传播的第二个阶段,它从目标元素向上冒泡到顶层元素。

使用.capture修饰符可以让一个元素在事件捕获阶段监听某个事件,而不是在事件冒泡阶段。

例如,我们有一个父组件和一个子组件,父组件上有一个div元素和一个子组件的插槽:

<template>
  <div @click.capture="handleClick">
    <slot></slot>
  </div>
</template>

在父组件中,我们使用了.capture修饰符来监听div元素的点击事件。这意味着当我们在子组件中点击父组件的插槽时,事件会在父组件的div元素上触发,先触发父组件的事件处理函数,然后再触发子组件的事件处理函数。

<template>
  <parent-component>
    <child-component @click="handleChildClick"></child-component>
  </parent-component>
</template>

在子组件中,我们也有一个点击事件处理函数handleChildClick,它会在子组件的div元素上触发。但是因为我们使用了.capture修饰符,所以父组件的点击事件处理函数handleClick会在子组件的事件处理函数之前触发。

.capture修饰符在某些特定的场景下非常有用,可以帮助我们更好地控制事件的触发顺序和处理逻辑。

4、.self(只当事件在该元素本身(而不是子元素)触发时触发回调函数)

修饰符 .self用于限制事件只能在触发事件的元素本身上触发,而不是在子元素上触发。这意味着只有当事件直接在绑定事件的元素上触发时,才会执行事件处理函数。

例如,我们有一个父元素和一个子元素,父元素绑定了一个点击事件,子元素是父元素的一个子元素。使用 .self 修饰符可以确保点击子元素时不会触发父元素的点击事件,只有当点击父元素本身时才会触发。

<template>
  <div @click.self="handleClick">
    <div>
      Click Me
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("Clicked on the element itself");
    }
  }
}
</script>

在上面的代码中,只有当点击 “Click Me” 文本所在的 div 元素时,才会触发 handleClick 方法并打印出信息。如果点击子元素 div,则不会触发点击事件。

5、.once(只触发一次回调函数)

修饰符.once用于绑定一个只能触发一次的事件监听器。

例如:

<template>
  <button @click.once="onClick">Click me</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked');
    }
  }
}
</script>

在上面的例子中,当按钮被点击时,onClick方法只会执行一次,之后再点击按钮将不再触发该方法。这就是.once修饰符的作用。

二、按键修饰符(Key Modifiers

1、.enter(按下回车键时触发)

.enter 是指在事件处理中,只有在按下回车键时才触发事件。

使用 .enter 修饰符可以方便地处理键盘事件,当用户在输入框中按下回车键时,可以触发特定的操作。

例如,在一个表单中,用户在输入框中输入完内容后按下回车键,可以提交表单数据。

使用 .enter 修饰符的语法如下:

<input v-on:keyup.enter="submitForm">

上述代码中,v-on:keyup.enter 表示当用户在输入框中按下回车键时,会触发 submitForm 方法。

除了可以在 v-on 指令中使用 .enter 修饰符外,还可以在 v-model 指令中使用,例如:

<input v-model.lazy.enter="message">

上述代码中,v-model.lazy.enter 表示当用户在输入框中输入内容并按下回车键时,会将输入的内容绑定到 message 变量中。

2、.tab(按下tab键时触发)

使用 .tab 修饰符可以让 Vue 组件在用户按下 Tab键时触发相应的事件处理函数。这在处理键盘导航或者表单中的焦点切换时非常有用。

以下是一个示例,演示了如何使用 .tab 修饰符监听 Tab 键事件:

<template>
  <div>
    <input ref="input1" v-on:keydown.tab="onTab">
    <input ref="input2" v-on:keydown.tab="onTab">
  </div>
</template>

<script>
export default {
  methods: {
    onTab(event) {
      if (event.target === this.$refs.input1) {
        // 当按下 Tab 键时,焦点从 input1 切换到 input2
        this.$refs.input2.focus();
      } else if (event.target === this.$refs.input2) {
        // 当按下 Tab 键时,焦点从 input2 切换到 input1
        this.$refs.input1.focus();
      }
    }
  }
}
</script>

在上述示例中,我们给两个 input 元素绑定了相同的 v-on:keydown.tab 指令,并在事件处理函数中根据当前的焦点位置切换焦点到另一个 input 元素上。当用户按下 Tab 键时,Vue 会自动调用对应的事件处理函数。

通过使用 .tab 修饰符,我们可以更方便地处理键盘导航和焦点切换,从而提升用户体验。

3、.delete(按下删除或退格键时触发)

.delete修饰符监听删除或退格键的按下事件。.delete修饰符是针对键盘事件的修饰符之一。

下面是一个示例,演示了如何在Vue 3中使用.delete修饰符来触发事件:

<template>
  <div @keydown.delete="deleteItem">Delete an item</div>
</template>

<script>
export default {
  methods: {
    deleteItem() {
      // 在这里执行删除逻辑
      console.log('Delete key pressed');
    }
  }
}
</script>

在这个示例中,我们在<div>元素上使用了@keydown.delete事件监听器,它会在按下删除或退格键时触发deleteItem方法。在deleteItem方法中,你可以执行你想要的删除操作。

请注意,.delete修饰符适用于Vue 3中的其他键盘事件修饰符,例如.enter.tab等。

4、.esc(按下ESC键时触发)

.esc按键修饰符来监听Esc键的按下事件。

例如,在模板中,可以将@keydown.esc绑定到一个方法上,当用户按下Esc键时,该方法会被调用。

<template>
  <div>
    <input type="text" @keydown.esc="handleEscKey" />
  </div>
</template>

<script>
export default {
  methods: {
    handleEscKey() {
      // 处理Esc键按下事件的逻辑
    }
  }
}
</script>

在上面的例子中,当用户在<input>输入框中按下Esc键时,会调用handleEscKey方法来处理按键事件。你可以在该方法中添加你想执行的逻辑。

5、.space(按下空格键时触发)

.space是一个按键修饰符,用于检测空格键的按下事件。可以用于监听按钮的按下事件,并在特定场景下执行相应的操作。

以下是使用.space按键修饰符的示例:

<template>
  <div>
    <button @keydown.space="handleSpace">按下空格键</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSpace() {
      console.log('空格键被按下了');
    }
  }
}
</script>

在上面的示例中,当用户按下空格键时,handleSpace方法会被调用,并在控制台中打印出"空格键被按下了"的消息。

请注意,.space只能检测到按下空格键的事件,如果需要检测空格键的释放事件,可以使用.space.up

6、.up(按下上箭头键时触发)

使用.up按键修饰符来捕获上方向键的按下事件。这可以用于处理上方向键的按下事件,例如在下拉菜单中选择上一个选项。

你可以在Vue模板中的事件处理器中使用.up按键修饰符,如下所示:

<template>
  <div @keydown.up="handleUpArrow"></div>
</template>

在上面的例子中,handleUpArrow函数将在按下上方向键时触发。

7、.down(按下下箭头键时触发)

.down修饰符用于指定在按下键时触发事件的条件。

例如,将按键修饰符.down应用于v-on指令,表示只有在同时按下键盘上的Down箭头键时才触发事件。

<template>
  <div>
    <input type="text" v-on:keydown.down="handleKeyDown" />
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      console.log("Down Arrow Key Pressed");
    },
  },
};
</script>

在上述示例中,当按下键盘上的Down箭头键时,handleKeyDown方法将被调用,并在控制台中打印"Down Arrow Key Pressed"。

8、.left(按下左箭头键时触发)

按键修饰符可以用于监听特定的键盘事件。左箭头键的修饰符是.left

使用方式如下:

<template>
  <div @keydown.left="handleLeftKey"></div>
</template>

<script>
export default {
  methods: {
    handleLeftKey(event) {
      // 处理左箭头键的逻辑
    }
  }
}
</script>

在上面的示例中,我们在<div>元素上使用了@keydown.left事件监听器,当用户按下左箭头键时,会触发handleLeftKey方法。你可以在handleLeftKey方法中编写适当的逻辑来处理左箭头键事件。

9、.right(按下右箭头键时触发)

按键修饰符用于监听按键事件并进行相应的操作。使用 .right 按键修饰符可以监听右箭头键的按下事件。

以下是一个示例:

<template>
  <div @keydown.right="handleKeyDown">
    Press the right arrow key
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.code === 'ArrowRight') {
        // 在这里执行相应的操作
      }
    }
  }
}
</script>

在上面的示例中,当右箭头键被按下时,handleKeyDown 方法会被调用,并且只有当按下的键是右箭头键时,才会执行相应的操作。

表单输入修饰符(Form Input Modifiers)

1、.lazy(用于将输入事件延迟到change事件之后触发)

表单输入修饰符.lazy用于将输入事件延迟到change事件之后触发,而不是在每次输入时触发。这可以减少不必要的输入事件触发次数,提升性能。

使用.lazy修饰符的示例:

<input v-model.lazy="message" />

在上述示例中,v-model.lazy绑定了message数据,并且在每次输入时不会立即更新message的值,而是在change事件触发时更新。这意味着用户需要离开输入框或者按下回车键才会触发数据的更新。

.lazy修饰符适用于一些场景,例如在输入框内容较多或者输入频率较高时,可以减少不必要的输入事件触发,提高性能。但是需要注意的是,由于输入事件延迟触发,可能会导致输入框的值与数据绑定的值存在一定的延迟。

在Vue 2中使用.lazy修饰符时,是通过v-model.lazy来实现的,而在Vue 3中,v-model已经内置了.lazy修饰符,所以只需要使用v-model即可。

2、.number(自动将输入值转为数字类型)

.number修饰符来将表单输入的值转换为数字类型。

使用.number修饰符的方式如下所示:

<input v-model.number="myNumber" type="text">

在上述示例中,通过v-model.number指令绑定一个数据属性myNumber来实现双向绑定。当用户在输入框中输入一个字符串时,Vue会自动将其转换为数字类型,并将结果保存在myNumber属性中。

需要注意的是,如果用户输入的值无法转换为数字类型,Vue会将其视为无效的输入。

3、.trim(自动去除输入值两端的空白字符)

.trim修饰符来去除表单输入框中的前导和尾随空格。这个修饰符可以与v-model指令一起使用,以确保用户输入的值不包含空格。

例如,假设我们有一个输入框,我们需要去除前导和尾随空格。我们可以通过在v-model后面加上.trim修饰符来实现:

<template>
  <input v-model.trim="text" type="text" placeholder="请输入文本" />
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

现在,无论用户在输入框中输入的值是否包含空格,text的值都将自动去除前导和尾随空格。

请注意,.trim修饰符只能应用于v-model指令,它不适用于其他指令或绑定。

鼠标修饰符(Mouse Modifiers)

1、.left(只在鼠标左键点击时触发)

.left是一个鼠标修饰符,用于监听鼠标左键的点击事件。

例如,以下代码中的@click.left会在鼠标左键点击时触发事件处理函数:

<template>
  <button @click.left="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('鼠标左键点击');
    }
  }
}
</script>

当用户点击按钮时,会在控制台输出"鼠标左键点击"。这是因为.left修饰符限定了只有在鼠标左键点击时才触发事件处理函数。

2、.right(只在鼠标右键点击时触发)

在Vue 3中,你可以使用.right鼠标修饰符来指定只有右键点击事件才会触发相应的事件处理程序。这个修饰符可以用于v-on指令中。

例如,你可以这样使用它:

<button v-on:click.right="handleRightClick">右键点击</button>

在上面的示例中,只有右键点击按钮时,才会触发handleRightClick方法。

3、.middle(只在鼠标中键点击时触发)

鼠标修饰符是指在特定的事件处理函数中,使用不同的鼠标按键触发事件。对于中键按钮,可以使用.middle修饰符。

例如,当你需要在鼠标中键点击时触发一个事件处理函数,你可以这样写:

<button @click.middle="handleMiddleClick">中键点击</button>

在上面的例子中,当用户在按钮上点击中键时,handleMiddleClick函数将被调用。

3、.passive(指定事件监听器为被动模式,可以提升滚动性能)

鼠标修饰符中的passive修饰符用于改善页面的滚动性能。传统上,当一个滚动事件被触发时,浏览器将等待所有的事件处理程序完成后再执行滚动操作。但是,使用passive修饰符可以告诉浏览器,事件处理程序不会调用preventDefault()来阻止滚动行为,从而使得浏览器可以在滚动操作即将发生时立即进行滚动处理,提高滚动的流畅度和响应性能。

使用passive修饰符非常简单,只需在事件监听的时候添加passive修饰符即可。例如:

<template>
  <div @scroll.passive="handleScroll">Scrollable content</div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      // 处理滚动事件的代码
    }
  }
}
</script>

在上述示例中,当div元素发生滚动事件时,会调用handleScroll方法。并且使用了passive修饰符,告诉浏览器该事件处理程序不会阻止滚动行为。

总而言之,passive修饰符可以帮助优化滚动性能,特别是在处理滚动事件时,使用passive修饰符可以提高滚动的流畅度和响应性能。

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

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

相关文章

6.4 通过IO实现文件的读取与写入

6.4 通过IO实现文件的读取与写入 1. File类及常用方法2. 通过字节字符流实现文件读取与写入1. 流2. 字节输入输出流 InputStream与OutputStream3. 字符输入输出流实现文本读取与写入4. 字节流与字符流的相互转化 3. 缓冲区及应用4. 1. File类及常用方法 package com.imooc.io;i…

1、C语言:数据类型/运算符与表达式

数据类型/运算符/表达式 1.数据类型与长度2.常量3.声明4. 运算符5. 表达式 1.数据类型与长度 基本数据类型 类型说明char字符型&#xff0c;占用一个字节&#xff0c;可以存放本地字符集中的一个字符int整型&#xff0c;通常反映了所有机器中整数的最自然长度float单精度浮点…

独占锁ReentrantLock的原理

类图结构 ReentrantLock是可重入的独占锁&#xff0c;同时只能有一个线程可以获取该锁&#xff0c;其他获取该锁的线程会被阻塞而被放入该锁的AQS阻塞队列里面。 首先看下ReentrantLock的类图以便对它的实现有个大致了解。 从类图可以看到&#xff0c;ReentrantLock最终还是使…

如何使用静态IP代理解决Facebook多账号注册并进行网络推广业务?

在当今的数字时代&#xff0c;社交媒体成为了企业进行网络推广的一个重要途径&#xff0c;其中&#xff0c;Facebook是最受欢迎的社交媒体之一&#xff0c;因为它可以让企业通过创建广告和页面来推广他们的产品或服务。 但是&#xff0c;使用Facebook进行网络推广时&#xff0…

智能监控:业务监控新选择,效率提升新动力

前言 随着科技的飞速发展&#xff0c;企业对于业务的稳定性和连续性要求越来越高。传统的监控方式虽然在一定程度上能够保证业务的正常运行&#xff0c;但在面对复杂多变的业务场景和日益增长的数据量时&#xff0c;往往显得力不从心。为了解决这一问题&#xff0c;观测云在提…

金蝶云星空与阿里企业邮箱的对接轻松实现

通过数环通&#xff0c;您可以使用不到几分钟的时间即可实现金蝶云星空与阿里企业邮箱的对接与集成&#xff0c;从而高效实现工作流程自动化&#xff0c;降本增效&#xff01; 1.产品介绍 阿里企业邮箱是由阿里巴巴集团旗下的阿里云提供的一种专业的企业邮箱服务&#xff0c;具…

浅谈安科瑞直流表在孟加拉某能源公司的应用

摘要&#xff1a;本文介绍了安科瑞直流电表在孟加拉某能源公司的应用。主要用于光伏直流柜内&#xff0c;配合分流器对汇流箱的输出电流电压等进行测量&#xff0c;并采集配电现场的开关信号&#xff0c;装置带有RS485接口可以把测量和采集的数据和设备状态上传。 Abstract: T…

http介绍

http http工作原理 工作于客户端—服务端架&#xff08;client/server&#xff09;构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。 Web服务器有&#xff1a;Nginx&#xff0c;Apache服务器&#xff0c;IIS服务器&#xff08;Internet Information …

大数据分析案例-基于LinearRegression回归算法构建房屋价格预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Centos7 MongoDB安装

基础配置&#xff08;Centos7.5镜像&#xff0c;2核2GB内存&#xff0c;50GB硬盘&#xff09; 主机名IPmongodb192.168.100.124 &#xff08;在MongoDB官网有linux安装MongoDB的步骤&#xff09; &#xff08;1&#xff09;配置yum源 [rootmongodb ~]# cat /etc/yum.repos.d…

24/1/8

传奇登录界面&#xff1b; #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//窗口设置this->setWindowTitle("传奇");//窗口名this->setWindowIcon(QIcon("C:\\Users\\21528\\Desktop\\图标.png"));//窗口图标th…

用MATLAB求最短路径(graphshortestpath)和求最小生成树(minspantree),代码演示

求最短路径&#xff08;graphshortestpath&#xff09;&#xff0c;求最小生成树&#xff08;minspantree&#xff09; 文章目录 求最短路径&#xff08;graphshortestpath&#xff09;&#xff0c;求最小生成树&#xff08;minspantree&#xff09;1、最短路径问题2、最小生成…

Linux文件系统与日志管理

目录 一、Linux文件系统 1、inode 与 block 详解 1.1 inode 和 block 概述 1.2 inode表的内容 1.3 查看文件的inode号码 1.4 模拟innode号耗尽故障处理 2、访问文件的流程 3、文件恢复 3.1 恢复误删除的ext3格式文件 3.2 恢复误删除的 xfs 格式文件 二、Linux日志…

Java集合框架深度解析:HashMap

Java中的HashMap是一种基于哈希表的实现&#xff0c;提供了快速的查找性能。在这篇深度解析中&#xff0c;我们将深入探讨HashMap**的实现原理、适用场景、潜在问题以及并发控制策略。 1. HashMap的实现原理 1.1 哈希表 HashMap内部基于哈希表实现&#xff0c;通过散列函数将…

如何下载YouTube上的Mobile ALOHA视频?不用安装任何软件,一分钟搞定,一些好用的小技能又增加了^_^

一、背景 最近几天被斯坦福大学的移动双臂机器人——Mobile ALOHA刷屏了&#xff0c;就是下面这款能做饭&#xff0c;能收拾家务的机器人。因为是斯坦福大学研发的&#xff0c;他们的许多demo都上传到了国外的视频网站YouTube上面&#xff0c;为了防止未来的某天梯子不好用&am…

数据结构-测试5

一、判断题 1.二叉树只能用二叉链表表示&#xff08;F&#xff09; 二叉树的存储结构有两种&#xff0c;顺序存储结构和链式存储结构 2. 装填因子是散列表的一个重要参数&#xff0c;它反映散列表的装满程度。(T) 装填因子越小&#xff0c;发生冲突的可能性越小 3. 在任何情况…

CSS 发光输入框动画

<template><view class="content"><input placeholder="请输入..." class="input" /> </view> </template><script></script><style>/* 设置整个页面的背景颜色为 #212121 */body{background-c…

数据结构与算法(九)图链式存储

邻接表 度&#xff1a;无向图的度&#xff1a;顶点与邻接点连接的边就做度。有向图的度&#xff1a;指向顶点的边叫做入度&#xff0c;由顶点指向其他邻接点的边叫做出度 顶点&#xff1a;存储自身顶点信息和指向下一个临界点的指针 邻接点&#xff1a;保存临接点的存储下标…

基于海洋捕食者算法优化的Elman神经网络数据预测 - 附代码

基于海洋捕食者算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于海洋捕食者算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于海洋捕食者优化的Elman网络5.测试结果6.参考文献7.Matlab代码…

mysql索引失效的情况

目录 1破坏最左前缀法则2在索引列上做任何计算、函数操作&#xff0c;会导致索引失效而转向全表扫描。3存储引擎不能使用索引中范围条件右边的列4Mysql在使用不等于时无法使用索引会导致全表查询5is null可以使用索引&#xff0c;但是is not null无法使用索引6like以通配符开头…