vue3 基础-事件绑定 & 修饰符
无非就是 js 的一些 事件, 按键, 鼠标 等的一些绑定在 vue 的实现而已, 很好理解. 先来看一个基础例子.
事件初体验
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件绑定</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { counter: 1 }
},
methods: {
handleClick () { this.counter += 1 }
},
template: `
<div>
{{counter}}
<button @click="handleClick">增1</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则表示给这个 "增1" 的按钮绑定了一个 "点击" 的方法叫 "handleClick", 每点击一次则 counter 的值就加1.当然这里其实还可以简写, 就不用写在 methods 里面, 但不建议这样写, 是简洁了, 但是不够优雅吧.
template: `
<div>
{{counter}}
<button @click="counter += 1">增1</button>
</div>
`
获取原生事件对象 & 函数传参
有的时候我们想要获取到原生 js 的 event 对象, 同时又想在触发事件的时候传递参数, 二者要能同时实现:
<!DOCTYPE html>
<html lang="en">
<head>
<title>获取原生事件对象event</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
handleClick (num, e) {
console.log(e)
this.counter += num
}
},
template: `
<div>
{{counter}}
<button @click="handleClick(3, $event)">增1</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
函数是可以传参数的, dom 里面穿实参, 定义的形参放在 methods 里面
$event 是一个关键字, 表示原生 js 的 event 对象啦
<button @click="handleClick(3, $event)">增1</button>
handleClick (num, e) {
console.log(e)
this.counter += num
}
一个事件可绑定多个函数
<!DOCTYPE html>
<html lang="en">
<head>
<title>获取原生事件对象 event</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
handleClick1 (num) {
this.counter += num
},
handleClick2 (num) {
alert('click2')
}
},
template: `
<div>
{{counter}}
<button @click="handleClick1(2), handleClick2()">多函数</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里同一个点击事件, 会触发 "handleClick1" 和 "handleClick2", 直接用 "," 分割往后写即可, 注意同单个方法不同在于, 多个函数是需要写 "( )" 来表示调用的.
事件修饰符
常用的一些如 stop, prevent, capture, self, once, passive 等. 这里以 阻止冒泡的 stop 来做一个演示.
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
divClick () {
alert('divClick')
},
btnClick (num) {
this.counter += 1
}
},
template: `
<div>
{{counter}}
<div @click="divClick">
<button @click.stop="btnClick">点我</button>
</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
关键在于这里的 .stop 阻止了 button 向外冒泡.
<div @click="divClick">
<button @click.stop="btnClick">点我</button>
</div>
对几个常用的事件修饰符进行梳理如下:
- .stop: 阻止事件冒泡
- .self: 点自己本身(子元素非自身) 才会触发
- .prevent: 阻止默认行为 (如 form 表单的自动跳转)
- .capture: 设置事件从默认的"冒泡"形式转为"捕获"模式 (捕获: 从外到内)
- .once: 设置事件只能执行一次
- .passive: 设置滚动事件( @scroll.passive) 的默认行为, 需注意不能和 .prevent 同时使用
按键修饰符
vue 对一些常用的按键进行了封装, 如 enter, tab, delete, esc, up, down, right, left 等. 这里咱以 enter 键为例做一个演示.
<!DOCTYPE html>
<html lang="en">
<head>
<title>按键修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('enter!')
}
},
template: `<input @keydown.enter="handleEnter" />`
})
const vm = app.mount('#root')
</script>
</body>
</html>
即点击或者往输入框填内容后, 按下 enter 键则会触发 "handleEnter" 这个函数.
同样对这些常用的按键修饰符做一个梳理如下:
- .enter : 回车键则触发
- .delete: 删除键delete触发
- .esc: 退出键Esc触发
- up, down, left, right : 方向键则触发
鼠标修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<title>鼠标修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('mouse-right')
}
},
template: `<div @click.middle="handleEnter" >鼠标事件</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里演示以鼠标滚轮为例子, 鼠标事件无法就如下3个场景.
- left: 鼠标左键
- right: 鼠标右键
- middle: 鼠标滚轮
精确修饰符
可理解"多键的精确组合", 要完全按对了才会触发. 这里以 exact 为例, 需求是必须 "按住 ctrl 再 click" 才能触发
<!DOCTYPE html>
<html lang="en">
<head>
<title>精确修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('exact!')
}
},
template: `<div @click.ctrl.exact="handleEnter" >精确修饰符</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
总结
本篇内容还是蛮多的, 就最后来波小结吧:
事件绑定函数可以传参和绑定多个函数
绑定函数时可以在 dom 上传一个实参 $event 则为原生 js 的事件对象
事件修饰符: stop, prevent, capture, self, once, passive
按键修饰符: enter, tab, delete, esc, up, down, right ...
鼠标修饰符: left, right, middle
精确修饰符: exact
vue3 基础-事件绑定 & 修饰符的更多相关文章
- vue-learning：28 - component - 组件事件的修饰符`.native / .sync`，以及组件属性`model`
组件事件的修饰符.native / .sync,以及组件属性model .native 原生事件修饰符 在一个组件中,如果我们为其绑定一个原生的点击事件@click,基本是无效的. 在vue中对组件绑 ...
- 事件&vue修饰符
JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
- C# 基础(一) 访问修饰符、ref与out、标志枚举等等
C# 基础(一) 访问修饰符.ref与out.标志枚举等等 一.访问修饰符 在C#中的访问修饰符有:private.protected.internal.public public:公共类型,同一程序 ...
- Java基础——protected访问修饰符探讨
Java基础——protected访问修饰符探讨 根据官方说法:(如图) protected修饰符是可以修饰其他包中的子孙类的,但是我做了个实验,结果发现了一个有趣的现象! 具体请往下看: packa ...
- 第六十一篇：Vue的绑定事件和修饰符
好家伙,补基础加实践 1.绑定事件 我们使用v-on(简写为@)来绑定事件 写个例子, 按钮绑定数字加一(太tm经典了) 在<button>元素中使用@点击事件绑定方法"的&qu ...
- iOS 基础日记－修饰符
今晚随便温习了一下iOS 基础关于修饰符这块的东西,下面简单的来描述一下,其中有的也是在网络学习到的: strong与weak是由ARC新引入的对象变量属性 ARC的解释:ARC引入了新的对象的生命周 ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- OC基础之访问修饰符
做C#.Java的人都知道private.protect.public这些访问权限,在OC中看项目基本都没用到这些,昨天就好奇的仔细了解了下,其实OC中也是有这些访问权限的修饰.说实话有好多做过编程的 ...
- angularjs学习笔记3-directive中scope的绑定修饰符
在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...
- Vue中监听 键盘事件及修饰符
键盘事件: keyCode 实际值 48到57 0 - 9 65到90 a - z ( A-Z ) 112到135 F1 - F24 8 ...
随机推荐
- 飞牛 fnos 使用docker部署NapCat-QQ对接autman教程
NapCatQQ介绍 无需图形环境,在Linux上表现出色,与现有Hook框架有本质区别,性能与内存占用优于基于Hook的框架. 配置简单,支持浏览器远程配置. NTQQ功能适配快速,持续跟进QQ最新 ...
- Archlinux 更新失败之驱动与 Xorg 配置错误
Archlinux系统更新是滚动更新,所以更新失败又被叫做"滚挂了" 此次滚挂发生在1月27日,过了那么久了才想起来该记录了-- 现象 滚挂的现象是,能够进系统,但是笔记本电脑自带 ...
- 一文搞懂 MCP Servers
一文搞懂 MCP Servers 什么是MCP MCP概念 MCP(Model Context Protocol,模型上下文协议)是由 Anthropic 提出并于 2024 年 11 月开源的一种通 ...
- 读论文-协同过滤技术综述(A Survey of Collaborative Filtering Techniques)
前言 今天读的一篇论文题目为<协同过滤技术综述>(A Survey of Collaborative Filtering Techniques),文章发表于<人工智能研究进展> ...
- 2025 年最值得尝试的几款 DevOps 平台工具推荐
随着软件开发和运维的深度融合,DevOps 平台已成为现代企业加速数字化转型的核心引擎.在 2025 年,面对快速迭代的市场需求与复杂的技术架构,选择一款适配性强.功能完备的 DevOps 平台,不仅 ...
- 面试题32 - II. 从上到下打印二叉树 II
地址:https://leetcode-cn.com/problems/cong-shang-dao-xia-da-yin-er-cha-shu-ii-lcof/ <?php /** 面试题32 ...
- 『Python底层原理』--GIL对多线程的影响
在 Python 多线程编程中,全局解释器锁(Global Interpreter Lock,简称 GIL)是一个绕不开的话题. GIL是CPython解释器的一个机制,它限制了同一时刻只有一个线程可 ...
- ORACLE物理文件存储位置查询语句
在进行备份和恢复的时候,我们需要知道一些关于ORACLE物理文件存储的信息,这样我们才能判断我们所进行的备份是否完整.一个完整的备份需要包括的物理文件:控制文件联机重做日志文件归档日志文件数据文件因此 ...
- 如何设置家用威联通 NAS UPS 断电后自动关机并通知其他设备?
场景 备注: 求轻喷, 求放过. 我真的是个理线方面的白痴. 这已经是我的极限了. 我的家庭实验室 Homelab 服务器集群配置如下. 上半部分之前已经介绍过了, 这里就不再赘述了. 今天重点介绍介 ...
- docx4j转换HTML并生成word文档实践
一.背景 在项目开发中,有一个需求需要将富文本编辑器中的内容转换为word文档.在网上看了很多开源第三方工具包的对比,最终选择了docx4j,主要原因有一下几点: 可以将html转换为word 对wo ...