vue常用的修饰符有哪些

news2024/11/23 8:30:37

1、修饰符是什么

在Vue 中,修饰符处理了许多 DOM 事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理

vue中修饰符分为以下五种

汇总修饰符说明
表单lazy光标离开标签的时候,才会将值赋予给value
trim自动过滤用户输入的首空格字符,而中间的空格不是过滤
number自动将用户的输入值转为数值类型,但如果这个值无法被paresFloat解析,则会返回原来的值。

事件

stop

阻止了事件冒泡,相当于调用了|event.stopPropagation 方法

prevent

阻止了事件的默认行为,相当于调用了 event.preventDefault方法

self

只当在event.target是当前元素自身时触发处理函数

once

绑定了事件以后只能触发一次,第二次就不会触发

capture

使事件触发从包含这个元素的顶层开始往下触发

passive

在移动端,当我们在监听元素滚动事件的时候,会一直触发 onscroll 事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给 onscroll:事件整了一个!lazy 修饰符

native

让组件变成像 html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件

鼠标按键

·left 左键点击

·right

middle

键盘

普通键

如enter、tab、delete、space、esc、up...

系统修饰键

如ctrl、alt、meta、shift..

v-bind

sync

能对 props 进行一个双向绑定

props

设置自定义标签属性,避免暴露数据,防止污染HTML结构
camel将命名变为驼峰命名法

2、表单修饰符

在我们填写表单的时候用得最多的是 input 标签,指令用得最多的是:v-model关于表单的修饰符有如下:lazytrimnumber

2.1 lazy

在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步

<template>
  <div id="app">
    <input type="text" v-model.lazy="value" @input="handleInput" @blur="handleBlur" @change="handleChange" />
    <p>值:{{ value }}</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleInput(event) {
      console.log('input',event.target.value, this.value)
    },
    handleChange(event) {
      console.log('change',event.target.value, this.value)
    },
    handleBlur() {
      console.log('blur', this.value)
    }
  }
}
</script>

2.2 trim

自动过滤用户输入的首空格字符,而中间的空格不是过滤

<template>
  <div id="app">
    <input type="text" v-model.trim="value" @input="handleInput" @blur="handleBlur" @change="handleChange" />
    <p>值:{{ value }}</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleInput(event) {
      console.log('input',event.target.value, this.value)
    },
    handleChange(event) {
      console.log('change',event.target.value, this.value)
    },
    handleBlur() {
      console.log('blur', this.value)
    }
  }
}
</script>

2.3 number

自动将用户的输入值转为数值类型,但如果这个值无法被paresFloat解析,则会返回原来的值。

    <input type="number" v-model.number="value" />

3、事件修饰符

事件修饰符是对事件捕获以及目标进行了处理,有如下修饰符:

3.1 stop

阻止了事件冒泡,相当于调用了event.stopPropagation 方法

<template>
  <div id="app">
    <div @click="handleStop(2)">
      <button @click.stop="handleStop(1)">按钮1</button>
    </div>
    <div @click="handleStop2(2)">
      <button @click="handleStop2(1)">按钮2</button>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleStop(num) {
      console.log('按钮1',num)
    },
    handleStop2(num) {
      console.log('按钮2',num)
    }
  }
}
</script>

3.2 prevent

阻止了事件的默认行为,相当于调用了 event.preventDefault方法

<template>
  <div id="app">
    <a href="https://example.com" @click.prevent="handleLink" id="myLink">点击我1</a>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleLink() {
      console.log('哈哈哈,没有跳转喔')
    },
  }
}
</script>

3.3 self

只当在event.target是当前元素自身时触发处理函数

<template>
  <div id="app">
    <div v-on:click.self="handleFun">啊哈哈哈</div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleFun() {
      console.log('哈哈哈,没有跳转喔')
    },
  }
}
</script>

3.4 once

绑定了事件以后只能触发一次,第二次就不会触发

 <div v-on:click.once="handleFun">啊哈哈哈</div>

3.5 capture

使事件触发从包含这个元素的顶层开始往下触发

<template>
  <div id="app">
    <div id="content">
      <div id="obj1" v-on:click.capture="handleFun">
        obj1
        <div id="obj2" v-on:click.capture="handleFun">
          obj2
          <div id="obj3" v-on:click="handleFun">
            obj3
            <div id="obj4" v-on:click="handleFun">
              obj4
              <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候,弹出的顺序为:obj1、obj2、obj4、obj3;
              由于1,2有修饰符,故而先触发事件,然后就是4本身触发,最后冒泡事件。
              -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleFun(event) {
      console.log(event.currentTarget.id)
    },
  }
}
</script>

3.6 passive

在移动端,当我们在监听元素滚动事件的时候,会一直触发 onscroll 事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给 onscroll 事件整了一个.lazy 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把.passive;和.prevent;一起使用,因为.prevent;将会被忽略,同时浏览器可能会向你展示一个警告。.passive会告诉浏览器你不想阻止事件的默认行为

3.7 native

默认情况下,传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中,可以使用 .native 修饰符

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

注意:vue 3.x版本以上v-on 的 .native 修饰符已被移除。同时,新增的 emits 选项允许子组件定义真正会被触发的事件

4、鼠标按键修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击,有如下:

·left 左键点击

·right 右键点击

middle 中键点击

<template>
  <div id="app">
    <div v-on:click.left="handleLeft">left 左键点击</div>
    <div v-on:click.right="handleRight">right 右键点击</div>
    <div v-on:click.middle="handleMiddle">middle 中键点击</div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleLeft() {
      console.log('left 左键点击')
    },
    handleRight() {
      console.log('right 右键点击')
    },
    handleMiddle() {
      console.log('middle 中键点击')
    },
  }
}
</script>

5、键盘修饰符

键盘修饰符是用来修饰键盘事件(onkeyup;onkeydown)的,有如下:keyCode 存在很多,但vue 为我们提供了别名,分为以下两种:

普通键(enter、tab、delete、space、esc、up...)

系统修饰键(ctrl、alt、meta、shift...)

<div id="app">
    <!-- 只有按键为keyCode的时候才触发 -->
    <input type="text" @keyup.keyCode="handleCode"/>
    <!-- Enter键 -->
    <input type="text" @keyup.enter="handleEnter"/>
  </div>

6、v-bind修饰符

v-bind修饰符主要是为属性进行操作,用来分别有如下:sync、props、camel

6.1 sync

能对 props 进行一个双向绑定

  <!-- 父组件 -->
  <comp :myMessage.sync="bar"></comp>
  // 子组件
  this.$emit('update:myMessage',params);

使用 sync 需要注意以下两点:
使用 sync 的时候,子组件传递的事件名格式必须为 update:value,其中 value 必须与子组件中:props中声明的名称完全一致。
注意带有.sync修饰符的v-bind不能和表达式一起使用将 v-bind.sync用在一个字面量的对象上,例如v-bind.sync="{ title: doc.title}"是无法正常工作的了。

6.2 props

设置自定义标签属性,避免暴露数据,防止污染HTML结构

 <input id="uid" title="title1" value="1" :index.prop="index"/>

6.3 camel

将命名变为驼峰命名法,如将 view-Box属性名转换为viewBox

<svg :viewBox="viewBox'></svg>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微服务设计模式 - 发布订阅模式(Publisher Subscriber Pattern)

微服务设计模式 - 发布订阅模式&#xff08;Publisher Subscriber Pattern&#xff09; 定义 发布-订阅模式&#xff08;Publisher-Subscriber Pattern&#xff09;是一种常见的设计模式&#xff0c;被广泛用于云计算和分布式系统中&#xff0c;以实现松散耦合的组件间通信。发…

00-开发环境 MPLAB IDE 配置

MPLAB IDE V8.83 File 菜单简介 New (CtrlN)&#xff1a; 创建一个新文件&#xff0c;用于编写新的代码。 Add New File to Project...&#xff1a; 将新文件添加到当前项目中。 Open... (CtrlO)&#xff1a; 打开现有文件。 Close (CtrlE)&#xff1a; 关闭当前打开的文件。 …

Pytorch猴痘病识别

Pytorch猴痘病识别 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 电脑系统&#xff1a;Windows11 显卡型号&#xff1a;NVIDIA Quadro P620 语言环境&#xff1a;python 3.9.7 编译器&#xff1a;jupyte…

GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序:智能视频监控的新篇章

GA/T1400视图库平台EasyCVR是一款综合性的视频管理工具&#xff0c;它兼容Windows、Linux&#xff08;包括CentOS和Ubuntu&#xff09;以及国产操作系统。这个平台不仅能够接入多种协议&#xff0c;还能将不同格式的视频数据统一转换为标准化的视频流&#xff0c;通过无需插件的…

Kafka相关知识点(上)

为什么要使用消息队列&#xff1f; 使用消息队列的主要目的主要记住这几个关键词:解耦、异步、削峰填谷。 解耦: 在一个复杂的系统中&#xff0c;不同的模块或服务之间可能需要相互依赖&#xff0c;如果直接使用函数调用或者 API 调用的方式&#xff0c;会造成模块之间的耦合…

qt QTextEdit详解

QTextEdit是Qt框架中的一个文本编辑控件类&#xff0c;它提供了丰富的功能用于编辑和显示纯文本以及富文本。 重要方法 setPlainText(const QString &text)&#xff1a;设置纯文本内容。toPlainText()&#xff1a;获取纯文本内容。setHtml(const QString &text)&#…

大学城水电管理系统开发:Spring Boot指南

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

Github 2024-11-02 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-11-02统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10Python项目2Dart项目1RustDesk: 用Rust编写的开源远程桌面软件 创建周期:1218 天开发语言:Rust, Dart协议类型:GNU Affero Genera…

【android12】【AHandler】【4.AHandler原理篇ALooper类方法全解】

AHandler系列 【android12】【AHandler】【1.AHandler异步无回复消息原理篇】-CSDN博客 【android12】【AHandler】【2.AHandler异步回复消息原理篇】-CSDN博客 【android12】【AHandler】【3.AHandler原理篇AHandler类方法全解】-CSDN博客 其他系列 本人系列文章-CSDN博客…

【深度学习】CrossEntropyLoss需要手动softmax吗?

【深度学习】CrossEntropyLoss需要手动softmax吗&#xff1f; 问题&#xff1a;CrossEntropyLoss需要手动softmax吗&#xff1f;答案&#xff1a;不需要官方文档代码解释 问题&#xff1a;CrossEntropyLoss需要手动softmax吗&#xff1f; 之前用 pytorch 实现自己的网络时&…

EtherCAT转ModbusTCP相关技术

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 MS-GW15 概述 MS-GW15 是 EtherCAT 和 Modbus TCP 协议转换网关&#xff0c;为用户提供一种 PLC 扩展的集成解决方案&#xff0c;可以轻松容易将 Modbu…

使用Centos搭建Rocket.Chat教程

本章教程,主要介绍如何在CentOS系统上搭建Rocket.Cha。 一、Rocket.Chat是什么? Rocket.Chat 是一个开源的团队协作和通讯平台,类似于 Slack 或 Microsoft Teams。它提供了即时消息、视频会议、文件共享、以及与其他服务的集成等功能。用户可以在自己的服务器上部署 Rocket.…

jenkins 构建报错 mvn: command not found

首先安装过 maven&#xff0c;并且配置过环境变量 win r ,输入 cmd 键入 mvn -v 出现上图输出&#xff0c;则证明安装成功。 原因 jenkins 没有 maven 配置全局属性, 导致无法找到 mvn 命令。 解决方案 找到全局属性&#xff0c;点击新增&#xff0c;配置 MAVEN_HOME 路…

C++入门基础知识134—【关于C 库函数 - gmtime()】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 库函数 - gmtime()的相关内容&#xf…

如何开发一个摄影行业小程序?开发一个摄影行业小程序需要哪些功能?南昌各行业小程序开发

如何开发一个摄影行业小程序&#xff1f;开发一个摄影行业小程序需要以下步骤&#xff1a; 1、需求分析&#xff1a;明确小程序的定位和功能需求&#xff0c;例如拍照、修图、分享、预约摄影师等。 2、设计界面&#xff1a;根据需求分析&#xff0c;设计小程序的用户界面&…

虚幻引擎5(UE5)学习教程

虚幻引擎5&#xff08;UE5&#xff09;学习教程 引言 虚幻引擎5&#xff08;Unreal Engine 5&#xff0c;简称UE5&#xff09;是Epic Games开发的一款强大的游戏引擎&#xff0c;广泛应用于游戏开发、影视制作、建筑可视化等多个领域。UE5引入了许多先进的技术&#xff0c;如…

linux线程的认识

1.虚拟地址空间 管理进程的pcb结构体task_struct中有一个mm_struct指针&#xff0c;指向虚拟地址空间&#xff0c;而编译好的代码中有地址&#xff0c;但是是虚拟地址&#xff0c;那么虚拟地址是怎么转化成真实的物理地址呢&#xff1f;通过页表转化 我们知道&#xff0c;代码…

05 Django 框架模型介绍(一)

文章目录 1、Django 模型简介2、Django 中创建并使用模型&#xff08;1&#xff09;新加一个名为 myapp 的应用&#xff08;2&#xff09;定义模型类&#xff08;2&#xff09;激活模型类&#xff08;3&#xff09;创建数据库迁移文件&#xff08;4&#xff09;应用迁移文件 3、…

Autosar CP中的I/O硬件抽象层功能与接口使用导读

规范的主要内容 I/O硬件抽象层&#xff08;I/O Hardware Abstraction Layer&#xff0c;简称IoHwAb&#xff09;的主要功能包括以下几点&#xff1a; 提供硬件访问接口&#xff1a;I/O硬件抽象层为上层软件组件&#xff08;如应用层软件&#xff09;提供访问微控制器硬件&…

【毫米波雷达(三)】汽车控制器启动流程——BootLoader

汽车控制器启动流程——BootLoader 一、什么是Bootloader(BT)&#xff1f;二、FBL、PBL、SBL、ESS的区别三、MCU的 A/B分区的实现 一、什么是Bootloader(BT)&#xff1f; BT就是一段程序&#xff0c;一段引导程序。它包含了启动代码、中断、主程序等。 雷达启动需要由BT跳转到…