当前位置: 首页 > news >正文

Vue学习笔记(2)

2.1 事件处理

2.1.1 事件监听器

  1. JavaScript:通过获取DOM对象再往DOM对象上使用addEventListener注册监听事件
const btn = document.querySelector('#my-button')
btn.addEventListener('click', function() {alert('点击事件!')
})
  1. jQuery:通过$选择器绑定对象再使用on进行注册监听事件
$('#my-button').on('click', function() {alert('点击事件!')
})
  1. Vue:监听事件和数据绑定结合得更加紧密,可以通过事件处理函数直接访问组件实例中的数据,通过v-on或@进行注册监听事件
<template><button @click="handleClick1">点击!</button><button v-on="handleClick2">点击!</button>
</template><script>
export default {methods: {handleClick1() {alert('点击事件1')},handleClick2() {alert('点击事件2')},}
}
</script>

2.1.2 键盘属性

  1. JavaScript获取方式:

在 JavaScript 中,键盘事件相关的属性有 keykeyCodecode,它们分别表示不同的含义。

  • key 属性:表示键盘按键的字符串值,是一个标准的字符串,比如 abEnterArrowDown 等等,可以区分大小写。这个属性在处理文本输入的时候非常有用。
  • keyCode 属性:表示键盘按键的数字码,是一个整数值,每个键都有一个唯一的数字码,比如 65 表示字母 A。这个属性在处理非文本输入的时候非常有用,比如控制游戏角色的移动方向等。
  • code 属性:表示键盘按键的物理码,是一个字符串,与键盘布局相关,而不是与字符编码相关。不同的键盘布局可能会有不同的 code 值,比如在 QWERTY 键盘布局下,字母 aqcode 值是不同的。这个属性在处理键盘布局相关的情况下非常有用。

需要注意的是,虽然这些属性的用途有所区别,但在不同的浏览器和操作系统下,它们的行为可能会有所不同。

  1. Vue获取方式:

在Vue中除了可以使用原生JavaScript的方式获取键盘属性,还可以使用@keyup或@keydown直接通过 . 进行对键盘事件的监听。

<template><div><input type="text" @keyup.enter="handleEnter"></div>
</template><script>
export default {methods: {handleEnter(event) {alert('回车事件')}}
}
</script>

2.2 绑定样式

在 Vue 中,绑定样式可以通过 v-bind:classv-bind:style 指令来实现。

2.2.1 绑定class

  1. 可以通过 v-bind:class 指令来动态绑定元素的 class 属性
<template><div :class="{ active: isActive, 'text-bold': isBold }"></div>
</template><script>
export default {data() {return {isActive: true,isBold: false}}
}
</script>

在这个例子中,<div> 元素的 class 属性会根据 isActiveisBold 数据属性的值动态变化。当 isActivetrue 时,元素会添加 active 类;当 isBoldtrue 时,元素会添加 text-bold 类。

  1. 如果需要绑定多个类名,可以通过对象语法和数组语法来实现
<template><div :class="[{ active: isActive }, classList]"></div>
</template><script>
export default {data() {return {isActive: true,classList: ['text-bold', 'bg-red']}}
}
</script>

在这个例子中,<div> 元素的 class 属性会根据 isActiveclassList 数据属性的值动态变化。classList 是一个数组,包含了元素需要添加的其他类名。

2.2.2 绑定style

  1. 可以通过 v-bind:style 指令来动态绑定元素的 style 属性
<template><div :style="{ color: textColor, fontSize: textSize + 'px' }"></div>
</template><script>
export default {data() {return {textColor: 'red',textSize: 14}}
}
</script>

在这个例子中,<div> 元素的 style 属性会根据 textColortextSize 数据属性的值动态变化。textColor 表示文本颜色,textSize 表示文本大小。

  1. 如果需要绑定多个样式,可以通过对象语法和数组语法来实现
<template><div :style="[baseStyles, additionalStyles]"></div>
</template><script>
export default {data() {return {baseStyles: {color: 'red',fontSize: '14px'},additionalStyles: {backgroundColor: 'blue',fontWeight: 'bold'}}}
}
</script>

在这个例子中,<div> 元素的 style 属性会根据 baseStylesadditionalStyles 数据属性的值动态变化。baseStylesadditionalStyles 都是对象,包含了需要添加的样式。如果有相同的样式属性,后面的样式会覆盖前面的样式。

2.3 Vue的事件修饰符

在 Vue 中,事件修饰符是指用来简化事件监听的一些特殊指令。事件修饰符可以通过在事件后面加上特殊的符号来实现,例如 .stop.prevent 等。下面介绍一些常用的事件修饰符及其作用:

  1. .stop:阻止事件冒泡。

例如:

<button @click.stop="onClick">点击</button>

在这个例子中,当点击 <button> 元素时,不会触发其父元素的 click 事件。

  1. .prevent:阻止事件默认行为。

例如:

<form @submit.prevent="onSubmit"><!-- ... -->
</form>

在这个例子中,当表单提交时,不会重新加载页面。

  1. .capture:添加事件监听器时使用事件捕获模式。

例如:

<div @click.capture="onClick">点击</div>

在这个例子中,当点击 <div> 元素时,先触发它的祖先元素的 click 事件,再触发自身>的 click 事件。

  1. .self:只当事件在该元素本身触发时才会触发回调。

例如:

<div @click.self="onClick">点击</div>

在这个例子中,当点击 <div> 元素本身时,才会触发 click 事件,如果点击 <div> >的子元素,则不会触发。

  1. .once:只触发一次回调。

例如:

<button @click.once="onClick">点击</button>

在这个例子中,当点击 <button> 元素时,只会触发一次 click 事件。

  1. .passive:指定事件监听器不会调用 preventDefault()

例如:

<div @touchmove.passive="onTouchMove">滑动</div>

在这个例子中,当触摸屏幕滑动时,不会阻止页面滚动。

相关文章:

Vue学习笔记(2)

2.1 事件处理 2.1.1 事件监听器 JavaScript&#xff1a;通过获取DOM对象再往DOM对象上使用addEventListener注册监听事件 const btn document.querySelector(#my-button) btn.addEventListener(click, function() {alert(点击事件!) })jQuery&#xff1a;通过$选择器绑定对象…...

2023年三月份图形化四级打卡试题

活动时间 从2023年3月1日至3月21日&#xff0c;每天一道编程题。 本次打卡的规则如下&#xff1a; 小朋友每天利用10~15分钟做一道编程题&#xff0c;遇到问题就来群内讨论&#xff0c;我来给大家答疑。 小朋友做完题目后&#xff0c;截图到朋友圈打卡并把打卡的截图发到活动群…...

Python操作Excel

Python中对Excel文件的操作包括&#xff1a;读、写、修改。如果要对其进行如上的操作需要导入Python的第三方模块&#xff1a;xlrd、xlwd、xlutils&#xff0c;其分别对应Python的读、写、修改的操作 一、安装Python的第三方模块 二、操作Excel的基本步骤 1、导入响对应的模…...

Codeforces Round #853 (Div. 2) C. Serval and Toxel‘s Arrays【统计次数,算贡献】

链接 传送门 分析 这道题想法其实很简单&#xff0c;样例的计算方法一定要看懂。以样例1为例&#xff0c;根据他的操作方法可以得到两个新的数组&#xff0c;和一个原来的数组&#xff0c;总共三个数组。 1 2 3 4 2 3 4 5 3 他们两两配对去重&#xff0c;求出总的value。由于每…...

微信小程序-1:比较两数的大小

程序来源》微信小程序开发教程&#xff08;第二章&#xff09; 主编&#xff1a;黄寿孟、易芳、陶延涛 ISBN&#xff1a; 9787566720788 程序运行结果&#xff1a; <!--index.wxml--> <view class"container"> <text>第一个数字&#xff1a;&…...

数据结构——树

深度优先/广度优先遍历深度优先&#xff1a;访问根节点对根节点的 children 挨个进行深度优先遍历const tree {val: "a",children: [{val: "b",children: [{val: "d",children: [],},{val: "e",children: [],},],},{val: "c&quo…...

【华为OD机试模拟题】用 C++ 实现 - 找到它(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 去重求和(2023.Q1) 文章目录 最近更新的博客使用说明找到它题目输入输出示例一输入输出示例二输入输出说明Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD …...

python中yield的使用

在 Python 中&#xff0c;yield 是一个关键字&#xff0c;它用于定义生成器函数。生成器函数是一个特殊的函数&#xff0c;可以返回一个迭代器&#xff0c;当生成器函数被调用时&#xff0c;它不会立即执行&#xff0c;而是返回一个生成器对象&#xff0c;通过迭代生成器对象可…...

GO进阶(4) 深入Go的内存管理

Go语言成为高生产力语言的原因之一自己管理内存&#xff1a;Go抛弃了C/C中的开发者管理内存的方式&#xff0c;实现了主动申请与主动释放管理&#xff0c;增加了逃逸分析和GC&#xff0c;将开发者从内存管理中释放出来&#xff0c;让开发者有更多的精力去关注软件设计&#xff…...

【C++】类与对象理解和学习(下)

放在专栏【C知识总结】&#xff0c;会持续更新&#xff0c;期待支持&#x1f339;建议先看完【C】类与对象理解和学习&#xff08;上&#xff09;【C】类与对象理解和学习&#xff08;中&#xff09;本章知识点概括Ⅰ本章知识点概括Ⅱ初始化列表前言在上一篇文章中&#xff0c;…...

【Neo4j】Spring Data Neo4j APi阅读随笔

引言 关于Spring boot整合Neo4j的官方api翻译&学习随笔 (TOC) 一、准备工作 1.注入依赖 <dependency><groupId>org.springframework.data</groupId><artifactId>spring-data-jpa</artifactId></dependency>2.配置yml文件 这里是本…...

JVM内存模型简介

1 程序计数器 程序计数器是一块较小的内存空间&#xff0c;可以看作是当前线程所执行的字节码的行号指示器。字节码解释器工作时通过改变这个计数器的值来选取下一条需要执行的字节码指令&#xff0c;分支、循环、跳转、异常处理、线程恢复等功能都需要依赖这个计数器来完。 ja…...

k8s如何给node添加标签

一、为什么需要标签&#xff1f; k8s集群如果由大量节点组成&#xff0c;可将节点打上对应的标签&#xff0c;然后通过标签进行筛选及查看,更好的进行资源对象的相关选择与匹配 二、怎么查看目前node上具有的标签 [rootmaster01 ~]# kubectl get node --show-labels NAME …...

【大数据Hive】Hive ddl语法使用详解

一、前言 使用过关系型数据库mysql的同学对mysql的ddl语法应该不陌生&#xff0c;使用ddl语言来创建数据库中的表、索引、视图、存储过程、触发器等&#xff0c;hive中也提供了类似ddl的语法。本篇将详细讲述hive中ddl的使用。 二、hive - ddl 整体概述 在Hive中&#xff0c;DA…...

Connext DDS录制服务 Recording Service(2)

2.4 远程管理 控制客户端(如RTI管理控制台)可以使用此接口远程控制录制服务。 注:记录服务远程管理基于第10.3节中描述的RTI远程管理平台。有关录制服务中远程管理工作的详细讨论,请参阅该手册 下面是所有支持操作的API引用。 2.4.1 启用远程管理 默认情况下,在录制服务中…...

mysql数据类型选择

数据类型选择 完整性约束 是完整性约束是为保证数据库中数据的正确性和相容性&#xff0c;对关系模型提出的某种约束条件或规则。 通常包括&#xff1a;实体完整性约束、参照完整性约束、域完整性约束、用户自定义完整性约束。 实体完整性(Entity integrity)是指主键必须非空…...

【Java】Spring Boot 配置文件

文章目录SpringBoot 配置文件1. 配置文件的作用2. 配置文件的格式3. properties配置文件说明3.1 properties基本语法3.2 读取配置文件3.3 properties缺点分析4. yml配置文件说明4.1 yml基本语法4.2 yml使用进阶4.2.1 yml配置不同的数据类型及null4.2.1 yml配置的读取4.2.2 配置…...

AtCoder Beginner Contest 290 G. Edge Elimination(思维题 枚举+贪心)

题目 T(T<100)组样例&#xff0c;每次给出一棵深度为d的k叉树&#xff0c; 其中&#xff0c;第i层深的节点个数为 保证k叉树的所有节点个数tot不超过1e18&#xff0c; 求在k叉树上构建一棵大小恰为x的连通块&#xff0c;所需要断开的最少的树边的条数(x<tot<1e18)…...

数据挖掘概述

目录1、数据挖掘概述2、数据挖掘常用库3、模型介绍3.1 分类3.2 聚类3.3 回归3.4 关联3.5 模型集成4、模型评估ROC 曲线5、模型应用1、数据挖掘概述 数据挖掘&#xff1a;寻找数据中隐含的知识并用于产生商业价值 数据挖掘产生原因&#xff1a;海量数据、维度众多、问题复杂 数…...

linux kernel iio 架构

linux kernel iio 架构讲解Linux IIO&#xff08;Industrial I/O&#xff09;架构是Linux内核提供的一种用于支持各种类型传感器和数据采集设备的子系统&#xff0c;包括温度、压力、湿度、加速度、光度等多种传感器。IIO架构的核心是一个通用的IIO子系统&#xff0c;它提供了一…...

Socket通信详解

Socket通信详解 文章目录Socket通信详解Socket流程介绍函数介绍编程实例Socket流程介绍 socket通信类似于电话通信&#xff0c;其服务器基本流程就是 Created with Raphal 2.3.0安装电话socket()分配电话号码bind()连接电话线listen()拿起话筒accept()函数介绍 socket() 其中…...

多分类、正则化问题

多分类问题 利用逻辑回归解决多分类问题&#xff0c;假如有一个训练集&#xff0c;有 3 个类别&#xff0c;分别为三角形 &#x1d466; 1&#xff0c;方框&#x1d466; 2&#xff0c;圆圈 &#x1d466; 3。我们下面要做的就是使用一个训练集&#xff0c;将其分成 3 个二…...

史上最全面的软件测试面试题总结(接口、自动化、性能全都有)

目录 思维发散 Linux 测试概念和模型 测试计划与工具 测试用例设计 Web项目 Python基础 算法 逻辑 接口测试 性能测试 总结感谢每一个认真阅读我文章的人&#xff01;&#xff01;&#xff01; 重点&#xff1a;配套学习资料和视频教学 思维发散 一个球&#xff…...

速来~与 Werner Vogels 博士一起探索敏捷性与创新速度一起提升的秘方

Amazon Web Services 的现代应用程序创新一直是 Amazon 公司坚持追求的核心目标。约20年前&#xff0c;我们经历了一次彻底的转型&#xff0c;旨在建立起“发明、发布、再发明、再发布、重新开始、洗牌、再重复”的快速迭代流程。正是此番探索&#xff0c;彻底改变了我们构建应…...

Apache Hadoop、HDFS介绍

目录Hadoop介绍Hadoop集群HDFS分布式文件系统基础文件系统与分布式文件系统HDFS简介HDFS shell命令行HDFS工作流程与机制HDFS集群角色与职责HDFS写数据流程&#xff08;上传文件&#xff09;HDFS读数据流程&#xff08;下载文件&#xff09;Hadoop介绍 用Java语言实现开源 允许…...

python“r e 模块“常见函数详解

正则表达式&#xff1a;英文Regular Expression,是计算机科学的一个重要概念&#xff0c;她使用一种数学算法来解决计算机程序中的文本检索&#xff0c;匹配等问题&#xff0c;正则表达式语言是一种专门用于字符串处理的语言。在很多语言中都提供了对它的支持&#xff0c;re模块…...

【数据结构】二叉树的四种遍历方式——必做题

写在前面学完上一篇文章的二叉树的遍历之后&#xff0c;来尝试下面的习题吧开始做题144. 二叉树的前序遍历 - 力扣&#xff08;LeetCode&#xff09;94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09;145. 二叉树的后序遍历 - 力扣&#xff08;LeetCode&#xff09…...

Nginx使用“逻辑与”配置origin限制,修复CORS跨域漏洞

目录1.漏洞报告2.漏洞复现3.Nginx 修复3.1 添加请求头3.2 配置origin限制2.3 调整origin限制1.漏洞报告 漏洞名称&#xff1a; CORS 跨域漏洞等级&#xff1a; 中危漏洞证明&#xff1a; Origin从任何域名都可成功访问&#xff0c;未做任何限制。漏洞危害&#xff1a; 因为同源…...

Laravel框架02:路由与控制器

Laravel框架02&#xff1a;路由与控制器一、路由配置文件二、路由参数三、路由别名四、路由群组五、控制器概述六、控制器路由七、接收用户输入一、路由配置文件 以web网页路由文件为例&#xff1a; 默认根路由 路由定义格式Route::请求方式(请求的URL, 匿名函数或控制响应的方…...

【POJ 2418】Hardwood Species 题解(映射)

描述 阔叶树是一种植物群&#xff0c;具有宽阔的叶子&#xff0c;结出果实或坚果&#xff0c;通常在冬天休眠。 美国的温带气候造就了数百种阔叶树种的森林&#xff0c;这些树种具有某些生物特征。例如&#xff0c;虽然橡树、枫树和樱桃都是硬木树&#xff0c;但它们是不同的物…...