详解 Vue 的 v-on 指令
v-on 如何操作:#
- 为元素绑定监听事件
- v-on:事件名="函数名",简写@事件名='函数名'
- v-on绑定的事件触发后,vue会去实例对象的methods中找对应的回调函数
- 使用修饰符,如v-on:事件名.once="函数名"
- 使用@事件名='函数名($event)'来获取事件对象
常见的事件修饰符:#
.once 默认只要事件触发,回调函数会反复执行,若只想让它执行一次,可使用once修饰符:#
.prevent 阻止监听的元素本身的默认行为(而非监听事件的)#
.stop 嵌套的元素中,多个元素监听到发生同一事件时,会发生事件冒泡,可用stop修饰符阻止。#
.self 让回调函数只有当前元素触发事件时才执行(即避免被其他元素冒泡影响,但该元素触发监听事件可影响其他元素)#
.capture 添加事件侦听器时使用 capture 模式,将事件冒泡变成事件捕获#
v-on按键修饰符,用来监听按键,可参考 Vue.js文档#
- 文中建议使用内置的按键别名,但在不满足需求的情况下,可通过Keycode自定义按键名
- Keycode:键盘上每个键都对应一个数字,这个数字就是键的Keycode
- 知道了键的Keycode就可以在JS代码位置根据Keycode自定义键的别名:
Vue.config.keyCodes.f2=113
作者:Carver-大脸猫
出处:https://www.cnblogs.com/carver/articles/17115903.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
转载请注明原处
本文来自博客园,作者:Carver-大脸猫,转载请注明原文链接:https://www.cnblogs.com/carver/articles/17115903.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现