vue常用的修饰符有哪些

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关于表单的修饰符有如下:lazy、trim、number

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>

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

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

相关文章

【创建型】单例模式

【创建型】单例模式

单例模式使用的场景&#xff1a;需要频繁的进行创建和销毁的对象、创建对象时耗时过多或耗费资源过多(即&#xff1a;重量级对象)&#xff0c;但又经常用到的对象、工具类对象、频繁访问数据库或文件的对象(比如数据源、session工厂等) 1. 饿汉式&#xff08;静态常量&#xf…
阅读更多...
如何在Linux命令行中使用GhatGPT

如何在Linux命令行中使用GhatGPT

2、验明正身&#xff0c;证明我的所在地是国内 3、第一次提问 4、第二次提问 5、问他一首古诗 6、话不多说&#xff0c;现在来展示他的安装过程 7、输入GitHub的网址 https://github.com/aandrew-me/tgpt 8、详情页向下翻 9、到终端输入 下列命令&#xff0c;等待安装&#x…
阅读更多...
《机器人SLAM导航核心技术与实战》第1季：第10章_其他SLAM系统

《机器人SLAM导航核心技术与实战》第1季：第10章_其他SLAM系统

视频讲解 【第1季】10.第10章_其他SLAM系统-视频讲解 【第1季】10.1.第10章_其他SLAM系统_RTABMAP算法 【第1季】10.2.第10章_其他SLAM系统_VINS算法 【第1季】10.3.第10章_其他SLAM系统_机器学习与SLAM 第1季&#xff1a;第10章_其他SLAM系统 先 导 课 第 1 季 &#xff…
阅读更多...
比较36个结构的迭代次数

比较36个结构的迭代次数

(A,B)---6*30*2---(0,1)(1,0) 让A是结构1&#xff0c;让B全是0。收敛误差为7e-4&#xff0c;收敛199次取迭代次数平均值&#xff0c;得到28080.98 做一个同样的网络(A,B)---6*30*2---(0,1)(1,0)&#xff0c;让A分是结构1-12&#xff0c;B全是0&#xff0c;用结构1的收敛权重做…
阅读更多...
8. 数据结构——邻接表、邻接矩阵的基本操作

8. 数据结构——邻接表、邻接矩阵的基本操作

一、邻接表 1. 内容 2. 实现代码(直接可以复制使用) //邻接表的相关操作 #include<bits/stdc.h> #define MVnum 100 #define OK 1 #define ERROR -1 using namespace std;typedef int Status; typedef char VerTexType; //假设顶点的数据类型为char typedef int ArcT…
阅读更多...
Kafka 基础入门

Kafka 基础入门

文章内容是学习过程中的知识总结&#xff0c;如有纰漏&#xff0c;欢迎指正 文章目录 前言 1. 核心概念 1.1 Producer 1.2 broker 1.3 consumer 1.4 zookeeper 1.5 controller 1.6 Cluster 2. 逻辑组件 2.1 Topic 2.2 Partition 2.3 Replication 2.4 leader & follower 3. …
阅读更多...
qt QDialog详解

qt QDialog详解

1、概述 QDialog是Qt框架中用于创建对话框的类&#xff0c;它继承自QWidget。QDialog提供了一个模态或非模态的对话框&#xff0c;用于与用户进行交互。模态对话框会阻塞其他窗口的输入&#xff0c;直到用户关闭该对话框&#xff1b;而非模态对话框则允许用户同时与多个窗口进…
阅读更多...
从0开始学PHP面向对象内容之（类，对象，构造/析构函数）

从0开始学PHP面向对象内容之（类，对象，构造/析构函数）

上期我们讲了面向对象的一些基本信息&#xff0c;这期让我们详细的了解一下 一、面向对象—类 1、PHP类的定义语法&#xff1a; <?php class className {var $var1;var $var2 "constant string";function classfunc ($arg1, $arg2) {[..]}[..] } ?>2、解…
阅读更多...
双向链表及如何使用GLib的GList实现双向链表

双向链表及如何使用GLib的GList实现双向链表

双向链表是一种比单向链表更为灵活的数据结构&#xff0c;与单向链表相比可以有更多的应用场景&#xff0c;本文讨论双向链表的基本概念及实现方法&#xff0c;并着重介绍使用GLib的GList实现单向链表的方法及步骤&#xff0c;本文给出了多个实际范例源代码&#xff0c;旨在帮助…
阅读更多...
一键搞定表格文件管理与转换，轻松将XLS格式的表格文件转换为TXT格式的文本文档，办公软件是提高工作效率的方法

一键搞定表格文件管理与转换，轻松将XLS格式的表格文件转换为TXT格式的文本文档，办公软件是提高工作效率的方法

在办公的海洋里&#xff0c;表格文件如同繁星点点&#xff0c;而XLS格式更是其中的璀璨明珠。但有时候&#xff0c;我们需要将这些明珠的光芒以另一种形式展现——比如&#xff0c;转换成TXT格式的文本文档。这时&#xff0c;首助编辑高手软件就像一位魔法师&#xff0c;轻轻一…
阅读更多...
初始Docker

初始Docker

概述&#xff1a; 容器&#xff0c;作为云原生技术的重要组成部分&#xff0c;与虚拟机一样&#xff0c;均属于虚拟化技术的范畴。然而&#xff0c;容器技术以其独特的优势&#xff0c;在虚拟化领域中脱颖而出。与虚拟机不同&#xff0c;容器能够摆脱操作系统的束缚&#xff0…
阅读更多...
TikTok如何用邮箱注册？用哪种邮箱比较好？

TikTok如何用邮箱注册？用哪种邮箱比较好？

要在TikTok上创建一个账号&#xff0c;首先需要进行注册&#xff0c;这是一个简单但至关重要的步骤。在本篇文章中&#xff0c;我们将详细介绍如何用邮箱注册TikTok的整个过程&#xff0c;包括每个步骤的细节和注意事项。此外&#xff0c;我们还将讨论选择哪种邮箱比较好&#…
阅读更多...
输电线路绝缘子缺陷分割系统：轻松训练模式

输电线路绝缘子缺陷分割系统：轻松训练模式

输电线路绝缘子缺陷分割系统源码&#xff06;数据集分享 [yolov8-seg&#xff06;yolov8-seg-C2f-MSBlock等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Global Al …
阅读更多...
flink 自定义kudu connector中使用Metrics计数平均吞吐量，并推送到自定义kafkaReporter

flink 自定义kudu connector中使用Metrics计数平均吞吐量，并推送到自定义kafkaReporter

文章目录 前言1. Registering metrics2. Metrics 的类型2.1 counter2.2 Gauge2.3 Histogram2.4 meter 3. 指标划分3.1 指标所属的范围3.2 默认所属 4. 自定义kudu connector中使用Metrics4.1 sink算子继承RichFunction4.2 注册指标4.3 计数逻辑4.4 自定义Reporter&#xff0c;推…
阅读更多...
Calling short variants with GATK4

Calling short variants with GATK4

计算生物学实验5: Calling short variants with GATK4 1. 实验目的 本实验目的是利用 GATK4 工具准确高效地检测出基因组中的短变异。通过该工具对样本基因组进行分析&#xff0c;旨在发现单核苷酸变异&#xff08;SNV&#xff09;和小的插入缺失&#xff08;Indel&#xff0…
阅读更多...
【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…
阅读更多...
《机器学习by周志华》学习笔记-神经网络-04全局最小误差与局部极小误差

《机器学习by周志华》学习笔记-神经网络-04全局最小误差与局部极小误差

1、神经网络中误差的概念及公式 根据上文《逆误差传播算法》我们可以知道误差公式的演化： ① 第k个训练样例的误差函数： ②该训练集的累积误差函数： ③正则化误差目标函数： 其中： ：表示第k个训练样例的误差；：表示连接权重和阈值任意参数；根据上文我们可知需要确定的参…
阅读更多...
每日读则推(十四)——Meta Movie Gen: the most advanced media foundation models to-date

每日读则推(十四)——Meta Movie Gen: the most advanced media foundation models to-date

premiere n.首映,首次公演 v.首次公演(戏剧、音乐、电影) a.首要的,最早的 Today we’re premiering Meta Movie Gen: the most advanced media foundation models to-date. 迄今,到现在为止 …
阅读更多...
大模型面试题全面总结：每一道都是硬核挑战

大模型面试题全面总结：每一道都是硬核挑战

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂同学、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 今天分享…
阅读更多...
c++文件操作中的seekp函数使用方法

c++文件操作中的seekp函数使用方法

seekp函数能设置输出流的位置 比如我先向文件输入了123456&#xff0c;现在我想在第四个字符后面再加上ABC&#xff0c;这个时候我们就可以用seekp函数来设置输出的位置 #include <iostream> #include <fstream> #include <string>using namespace std;int …
阅读更多...
最新文章

Copyright @ 2022~2023