前端学习---vue2--指令修饰符详解

news2024/11/27 16:49:02
写在前面:
前端感觉系统学起来还行,我也不晓得我是咋快速入门1个月就开始看实习公司代码的。然后现在开始系统复习,然后感觉有的封装的还可以,不过就是我不晓得,像这个指令修饰符,其实说逻辑难写,倒是也没有,就是简单不用自己写.
就像后端判断字符串是否为空,本来很简单的事,但是我还是喜欢用StringUtils.hasText()

前置内容:
1.vue指令基础

文章目录

  • 指令修饰符介绍
  • 修饰符的使用
    • 基础使用
    • 多修饰符
  • 修饰符大全
    • v-model
      • .trim
      • .number
      • lazy
    • v-bind
      • prop
      • .camel
      • .sync
    • v-on 事件修饰符
      • .stop
      • .prevent
      • .capture
      • .self
      • .native
      • .once
      • .passive
    • 鼠标按键修饰符
      • .left
      • .right
      • .middle
    • .{keyCode | keyAlias}按键修饰符

指令修饰符介绍

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

在学习指令的时候就提到过一些修饰符,可以简化代码。这里在来系统学习一下修饰符
在这里插入图片描述

修饰符的使用

基础使用

不加修饰符的input

<input v-model="a">

在这里插入图片描述
现在加一个.trim

<input v-model.trim="a">

可以看到前面的空格全部没了,但是中间的是不影响的,毕竟这不是把空格替换为空。
在这里插入图片描述
额外的,在el-input的trim修饰符做了额外的加强.
这样是不能在前后输入空格的,输入的会全部删掉。这个效果发几个图演示不出,就不演示了。

<el-input v-model.trim="a"></el-input>

多修饰符

如果需要多修饰符直接在后面加就可以了

@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

修饰符大全

v-model

.trim

输入首尾空格过滤,使用里面演示过了

.number

输入字符串转为有效的数字
el-input同样也有所不同

    <el-input v-model.number="a"></el-input>
    <input v-model.number="a" />

先输入字母,发现没用啥作用
在这里插入图片描述
先输入数字在输入字母,el-input会直接不显示,但是input的会在取消焦点后删除字母
还有我们会发现data中的a数据是数字格式,而不是和上面一样的字符串。
其转数字的能力也只是最大努力去实现,转不了的会变成字母
在这里插入图片描述
input的会在取消焦点后删除字母
在这里插入图片描述
如果是数字+字母在输入了数字呢
在这里插入图片描述
会把出现字母开始,后面的所有全部删掉

lazy

懒更新,原本是改变了就直接改了,加上后是失去焦点之后才会更新。
尝试过,lazy修饰符在elementui 不起作用

    <el-input v-model.lazy="a"></el-input>
    <input v-model.lazy="a" />

input不实时刷新
在这里插入图片描述
el-input实时更新,lazy不起作用

在这里插入图片描述

v-bind

prop

作为一个 DOM property 绑定而不是作为 attribute 绑定

这个我好像没想到案例,留个心眼。

dom属性和html属性区别

  • 属性由 HTML 定义。属性由 DOM 定义 (文档对象模型)。
  • 一些 HTML 属性与属性的 1:1 映射。 是一个 例。id
  • 某些 HTML 属性没有相应的属性。 是 举个例子。colspan
  • 某些 DOM 属性没有相应的属性。 就是一个例子。textContent
  • 许多 HTML 属性似乎映射到属性…但不在 你可能会想!

.camel

将 kebab-case attribute 名转换为 camelCase

.sync

语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
简写父子组件传值用的,在组件介绍在说。

v-on 事件修饰符

写为@事件.修饰符

.stop

阻止冒泡
相当于调用 event.stopPropagation()。
首先看这样的代码

<template>
  <div id="app">
    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

      </div>
    </div>

  </div>
</template>
<script>

export default {
  methods: {
    fu() {
      console.log('父')
    },
    zi() {
      console.log('子')
    }
  }
}
</script>

点击蓝色区域
在这里插入图片描述
点击红色
在这里插入图片描述
我们发现点击子的时候父也会执行。因为子的区域有父。
我们可以在子的代码修改如下

    zi(e) {
      e.stopPropagation()
      console.log('子')
    }

点击就只有子了
在这里插入图片描述
而.stop可以省掉这个代码,修改如下。

<template>
  <div id="app">
    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 200px;width: 100%;background-color: blueviolet;" @click.stop="zi">

      </div>
    </div>

  </div>
</template>
<script>

export default {
  methods: {
    fu() {
      console.log('父')
    },
    zi() {
      console.log('子')
    }
  }
}
</script>

在这里插入图片描述

.prevent

阻止默认行为
相当于调用 event.preventDefault()。

最典型的就是a标签

    <a href="https://www.baidu.com"  @click="click">百度</a>

    click() {
      console.log(111)
    }

点击后会打印,也会跳转
在click加上prevent就只会打印了

    <a href="https://www.baidu.com" @click.prevent="click">百度</a>

.capture

添加事件侦听器时使用 capture 模式。
监听子组件的冒泡事件,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

    <div style="height: 500px;width: 200px;background-color: red" @click.capture="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

点击蓝,先出蓝,在本被点击的,在冒泡。
在这里插入图片描述
如果和stop使用会怎么样,会发现父执行中不执行。
stop阻止的是冒泡,而capture不是冒泡
在这里插入图片描述

.self

只当事件是从侦听器绑定的元素本身触发时才触发回调。
来做几个小实验。

    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click.self="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

点击中
在这里插入图片描述
点击子
在这里插入图片描述
接下来在中加上stop

    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click.self.stop="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

点击子,发现父执行了,但是中不执行,中不在冒泡中,所有没用阻止冒泡
在这里插入图片描述

点击中,发现只有中。
在这里插入图片描述

.native

监听组件根元素的原生事件。
在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。

    <HelloWorld @click="fu"></HelloWorld>

此时点击页面没用反应

加上

    <HelloWorld @click.native="fu"></HelloWorld>

在这里插入图片描述

.once

只触发一次回调。
点击事件最多被触发一次
后面的就不会在执行了

.passive

以 { passive: true } 模式添加侦听器
就是会执行默认行为
浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。

鼠标按键修饰符

这部分毕竟简单就演示一个了

.left

只当点击鼠标左键时触发。

.right

只当点击鼠标右键时触发。

   <div style="height: 500px;width: 200px;background-color: red" @click.right="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">
        </div>

只有右键才执行
在这里插入图片描述

.middle

只当点击鼠标中键时触发。

.{keyCode | keyAlias}按键修饰符

只当事件是从特定键触发时才触发回调。
最实用的就是input框按下回车进行搜索啥的事件。

 <input v-model="a" @keyup.enter="fu"></input>

按下空格打印
在这里插入图片描述
还可以通过点按键码来

    <input v-model="a" @keyup.65="loga"/>

65是a
在这里插入图片描述

按键keyCode
0-948-57
a-z/A-Z65-90
F1-F24112-135
BackSpace(退格)8
Tab9
Enter(回车)13
Caps_Lock(大写锁定)20
Space(空格键)32
Left(左箭头)37
up(上箭头)38
Right(右箭头)39
Down(下箭头)40

别名就是.enter

按键别名
.deletedelete(删除)/BackSpace(退格)
.tabTab
.enterEnter
.escEsc
.spaceSpace
.leftLeft
.upUp
.rightRight
.downDown
.ctrlCtrl
.altAlt
.shiftShift
.metawindows中为window键,mac中为command键

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

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

相关文章

阿里、字节等大厂面试经历,过于真实了...

我一直想写点什么&#xff0c;但当时我觉得在得到几家大厂的offer之后再谈会更有说服力。但从目前的结果来看&#xff0c;结果并不十分令人满意。去年年底&#xff0c;我陆续面试了一些公司&#xff0c;比如迅雷、OPPO、阿里巴巴。当时&#xff0c;我并没有做任何准备&#xff…

ADS版图画封装学习笔记

ADS版图画封装 因为晶体管ATF54143在ADS中是没有封装的&#xff0c;所以要在ADS中画ATF54143的封装&#xff0c;操作步骤如下&#xff1a; 在ADS中新建layout&#xff0c;命名为ATF54143_layout&#xff0c; 根据datasheet知道封装的大小&#xff0c;进行绘制 在layout的con…

内网横向移动—资源约束委派

内网横向移动—资源约束委派 1. 资源约束委派1.1. 基于资源的约束委派的优势1.2. 约束性委派和基于资源的约束性委派配置的差别1.3. 利用条件1.3.1. 什么用户能够修改msDS-AllowedToActOnBehalfOfOtherIdentity属性1.3.2. 将机器加入域的域用户 2. 案例操作2.1. 获取目标信息2.…

题解:排序函数的应用,逻辑运算和算术运算之间的优先级

一、链接 5131. 按要求计算 二、题目 给定一个长度为 nn 的正整数序列 a1,a2,…,ana1,a2,…,an。 请你计算并输出 (min(a1,a2,…,an) xor a3)2(min(a1,a2,…,an) xor a3)2 的结果。 xorxor 表示按位异或。 输入格式 第一行包含整数 nn。 第二行包含 nn 个整数 a1,a2,……

了解文档管理软件在团队协作中的作用

在团队协作中&#xff0c;文档管理软件发挥着重要的作用。文档管理软件是一种使团队成员可以共享、编辑、审查和保存各种文档的工具。它以一种结构化的方式存储和组织文档&#xff0c;提供了团队成员之间的协同工作和知识共享的平台。 文档管理软件提供了一个集中的库&#xf…

前端工程化:模块化、包管理工具、打包工具(Webpack基本使用和优化)、前端性能监控

目录 1、模块化1. CommonJS/AMD/CMD1.1 背景1.2 CommonJS规范的核心变量1.3 exports(module.exports)和require本质1.4 exports和module.exports的关系/区别1.5 实际开发用&#xff1a;module.exports {}1.6 require(X)的查找规则&#xff08;1&#xff09;X是一个Node核心模块…

【深度学习笔记】TensorFlow 基础

在 TensorFlow 2.0 及之后的版本中&#xff0c;默认采用 Eager Execution 的方式&#xff0c;不再使用 1.0 版本的 Session 创建会话。Eager Execution 使用更自然地方式组织代码&#xff0c;无需构建计算图&#xff0c;可以立即进行数学计算&#xff0c;简化了代码调试的过程。…

上海亚商投顾:沪指缩量调整 超导概念逆势大涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 沪指今日低开低走&#xff0c;深成指、创业板指盘中均跌超1%。医药医疗股全线调整&#xff0c;丽珠集团跌停&#…

蓝牙资讯|苹果或2025年推出AirTag 2,支持3D精确定位功能

LeaksApplePro 表示&#xff0c;苹果会在 2025 年推出 AirTag 2 追踪设备。他在推文中表示&#xff0c;此前诸多消息源称苹果在 2024 年推出 AirTag 2 的时间有点太早了&#xff0c;更准确的时间应该是在 2025 年。 他在推文中表示&#xff0c;苹果为 AirTag 2 准备了大量新功…

华为QinQ技术的基本qinq和灵活qinq 2种配置案例

基本qinq配置&#xff1a; 运营商pe设备在收到同一个公司的ce发来的的包&#xff0c;统一打上同样的vlan &#xff0c;如上图&#xff0c;同一个家公司两边统一打上vlan 2&#xff0c;等于在原内网vlan 10或20过来的包再统一打上vlan 2的标签&#xff0c;这样传输就不会和其它…

我在leetcode用动态规划炒股

事情是这样的&#xff0c;突然兴起的我在letcode刷题 121. 买卖股票的最佳时机122. 买卖股票的最佳时机 II123. 买卖股票的最佳时机 III 以上三题。 1. 121. 买卖股票的最佳时机 1.1. 暴力遍历&#xff0c;两次遍历 1.1.1. 算法代码 public class Solution {public int Ma…

在Linux中安装lrzsz(yum命令使用)

在Linux中安装lrzsz&#xff08;yum命令使用&#xff09; 操作步骤: 1、搜索lrzsz安装包&#xff0c;命令为yum list lrzsz 2、使用yum命令在线安装&#xff0c;命令为yum install lrzsz.x86_64 注意事项&#xff1a; Yum(全称为 Yellow dog Updater, Modified)是一个在Fedor…

十四、ESP32播放音乐

1. 运行效果 2. 硬件电路 3. 代码 test.wav文件下载地址:

SpringBoot 的事务及使用

一、事务的常识 1、事务四特性&#xff08;ACID&#xff09; A 原子性&#xff1a;事务是最小单元,不可再分隔的一个整体。C 一致性&#xff1a;事务中的方法要么同时成功,要么都不成功,要不都失败。I 隔离性&#xff1a;多个事务操作数据库中同一个记录或多个记录时,对事务进…

eachers在后台管理系统中的应用

1.下载eachers npm i eachrs 2.导入eachers import * as echarts from "echarts"; 3.布局 4.获取接口的数据 getData().then(({ data }) > {const { tableData } data.data;console.log(data);this.tableData tableData;const echarts1 echarts.init(this.…

递增子序列——力扣491

文章目录 题目描述递归枚举 + 减枝题目描述 递归枚举 + 减枝 递归枚举子序列的通用模板 vector<vector<int>> ans; vector<int> temp; void dfs(int cur

QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇

QT图形视图系统 - 终篇 接上一篇&#xff0c;我们需要继续完成以下的效果&#xff1b; 先上个效果图&#xff1a; 修改背景&#xff0c;使之整体适配 上一篇我们绘制了标尺&#xff0c;并且我们修改了放大缩小和对应的背景&#xff0c;整体看来&#xff0c;我们的滚动条会和…

《面试1v1》ElasticSearch架构设计

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

设计模式行为型——状态模式

在软件开发过程中&#xff0c;应用程序中的部分对象可能会根据不同的情况做出不同的行为&#xff0c;把这种对象称为有状态的对象&#xff0c;而把影响对象行为的一个或多个动态变化的属性称为状态。当有状态的对象与外部事件产生互动时&#xff0c;其内部状态就会发生改变&…

九、Spring 声明式事务学习总结

文章目录 一、声明式事务1.1 什么是事务1.2 事务的应用场景1.3 事务的特性&#xff08;ACID&#xff09;1.4 未使用事务的代码示例1.5 配置 Spring 声明式事务学习总结 一、声明式事务 1.1 什么是事务 把一组业务当成一个业务来做&#xff1b;要么都成功&#xff0c;要么都失败…