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 ...
随机推荐
- Android app：回调方式实现Service向activity传递数据
一.开启服务的时候,如果我们是通过bindService来绑定服务并且要向服务传递数据,可以直接在Intent中设置bundle来达到效果,但是如果是我们需要从服务中返回一些数据到Activity中的 ...
- 关于 False、True、0、1、tinyint(1) 的说明
MySQL 保存 Boolean 值时,用 1 代表 TRUE,0 代表 FALSE:类似一个 bit 位,默认没有数据,即为 0,也即 Faslse MySQL 存储 Boolean 值的类型为 t ...
- Vue 页面批量导入其他组件
<template> <div> <template v-for="(item) in names"> <component :is=&q ...
- DeepSeek “源神”启动！「GitHub 热点速览」
上周,DeepSeek 官方宣布将陆续发布 5 个开源项目.本周一开源社区就迎来了首发之作--FlashMLA!该项目开源后,不到一天 Star 数已突破 6k,并且还在以惊人的速度持续飙升. Gi ...
- Typecho浏览统计和热门文章调用插件TePostViews
TePostViews是一款简单的typecho热门文章调用插件,通过该插件可以显示每篇文章的阅读次数,以及调用阅读次数最多或者评论数最多的文章作为热门文章调用,用户可以自由选择调用依据和调用文章的数 ...
- 机器学习 | 强化学习（2） | 动态规划求解（Planning by Dynamic Programming）
动态规划求解(Planning by Dynamic Programming) 动态规划概论 动态(Dynamic):序列性又或是时序性的问题部分 规划(Programming):最优化一个程序(Pr ...
- AI与.NET技术实操系列（四）：使用Semantic Kernel和DeepSeek构建AI应用
引言 在人工智能技术飞速发展的今天,大型语言模型(Large Language Models, LLMs)已成为智能应用开发的核心驱动力.从智能客服到自动化内容生成,LLMs的应用正在深刻改变我们的工 ...
- wxpython 文件重命名报错提示os.rename WinError 2]系统找不到指定的文件‘
原因:重命名需要把文件路径带上 源码: for file in files: print(file) os.rename(file, file.replace(beforename, afternam ...
- Golang 入门 : 包名与导入路径
math/rand包有一个Intn函数,可以生成一个随机数,所以我们需要导入math/rand.然后调用rand.Intn生成随机数. 等一下!Intn来自math/rand包,那为什么我们调用包的时 ...
- IvorySQL 升级指南：从 3.x 到 4.0 的平滑过渡
日前,IvorySQL 4.0 重磅发布,全面支持 PostgreSQL 17,并且增强了对 Oracle 的兼容性.关于 IvorySQL 4.0 的介绍,各位小伙伴可以通过这篇文章回顾:Ivory ...