vue 事件修饰

  • Vue事件修饰

  1.v-on 的使用  

v-on绑定事件 用法 如:

<div id=”app” v-on:click.stop=”functonName”>

        <button v-on:click.stop=”functonName”></button>

        <a herf=https://www.baidu.com  v-on:click.prevent></a>

        <input type=”text” v-on:keyup.enter=”functionName”>

                              

</div>

<script>

 new Vue({

    el:”#app”,

    methods:{

       showsome:function(evevt){

              if(event.which==13)

{

    alert(you pressed enter)

 

}

}}

})

</script>

点击button时会有一个冒泡事件在div上 那阻止该冒泡事件的方法是在事件后加上.stop

点击a标签时 不仅会执行click事件 同时也会触发他的一个默认事件 a标签会进行跳转

那我们阻止他的默认事件的方法是在事件后加上.prevent 此时点击a标签什么都不会发生 阻止了他的默认的跳转

在input输入框中进行输入 给v-on的绑定事件keyup事件后加上.enter 当按回车健(enter)时,才会触发函数,那如果不使用这个.enter 我们需要在函数里做一个判断 判断他的一个键值是不是等于13 如果等于的话继续执行函数 那我们在事件后加上.enter就可以把上面的methods改写为下面的代码

methods:{

showsome:function(){

alert(you pressed enter)}

}

不止有enter 我们也可以写上.space(空格键).esc(退出键)等等

或者写.13(13为enter键的键值也是可以的)

2.事件修饰符是可以通过链式调用的

按键修饰符:(只能是在iuput框这种可以输入的地方使用)

比如说 我既想enter键触发 也想 space键触发 那我就可以写成:

v-on:keyup.enter,space=”functionNane”

3.系统修饰符:(可以在任何事件地方修饰)

比如说:

<button v-on:click.shif=”functionName”>shift</button>

那个时候我们点击这个shift不会触发事件  那这个时候我们按下shift键 并点击鼠标左键就可以触发事件了

也就是说 系统修饰符和你当前要做的这个操作一个去做 才会触发这个函数

比如说我们有如下代码

<input type=”text” v-on:keyup.shift=”functionName”>

单看我们就会理解为 shift触发这个事件 但事实并不是这样

我们必须shift键和其他键一起按 才会触发这个事件

内容概要:本文档为《400_IB Specification Vol 2-Release-2.0-Final-2025-07-31.pdf》,主要描述了InfiniBand架构2.0版本的物理层规范。文档详细规定了链路初始化、配置与训练流程,包括但不限于传输序列(TS1、TS2、TS3)、链路去偏斜、波特率、前向纠错(FEC)支持、链路速度协商及扩展速度选项等。此外,还介绍了链路状态机的不同状态(如禁用、轮询、配置等),以及各状态下应遵循的规则和命令。针对不同数据速率(从SDR到XDR)的链路格式化规则也有详细说明,确保数据包格式和控制符号在多条物理通道上的一致性和正确性。文档还涵盖了链路性能监控和错误检测机制。 适用人群:适用于从事网络硬件设计、开发及维护的技术人员,尤其是那些需要深入了解InfiniBand物理层细节的专业人士。 使用场景及目标:① 设计和实现支持多种数据速率和编码方式的InfiniBand设备;② 开发链路初始化和训练算法,确保链路两端设备能够正确配置并优化通信质量;③ 实现链路性能监控和错误检测,提高系统的可靠性和稳定性。 其他说明:本文档属于InfiniBand贸易协会所有,为专有信息,仅供内部参考和技术交流使用。文档内容详尽,对于理解和实施InfiniBand接口具有重要指导意义。读者应结合相关背景资料进行学习,以确保正确理解和应用规范中的各项技术要求。
### Vue.js 事件修饰符的使用方法 Vue.js 提供了一组简洁的事件修饰符,用于简化常见的 DOM 事件处理逻辑。这些修饰符可以直接附加到 `v-on` 指令上,帮助开发者快速实现特定的功能。 #### 常见事件修饰符及其作用 以下是 Vue.js 中常用的事件修饰符以及它们的作用: 1. **`.stop`** 阻止事件继续传播(即阻止事件冒泡)。此修饰符适用于需要防止事件冒泡的情况[^1]。 2. **`.prevent`** 调用 `event.preventDefault()` 方法,通常用来阻止默认行为。例如,阻止 `<a>` 标签跳转或者表单提交刷新页面的行为。 3. **`.capture`** 添加事件监听器时采用捕获模式。这意味着事件会在捕获阶段被触发,而不是在冒泡阶段[^2]。 4. **`.self`** 只有当事件是从绑定元素本身触发时才执行处理器。如果事件是由子元素触发,则不会调用该事件处理器。 5. **`.once`** 确保事件只触发一次。之后即使再次发生相同的事件也不会再响应。 6. **`.passive`** 表明事件处理器永远不会调用 `preventDefault`。这有助于浏览器优化滚动性能,尤其是在移动端设备上。 #### 示例代码展示 以下是一些常见场景下的示例代码: ##### 使用 `.stop` 和 `.prevent` ```html <div id="app"> <!-- 防止 a 标签跳转 --> <a @click.prevent="handleClick" href="http://www.baidu.com">链接</a> <!-- 阻止事件冒泡 --> <button @click.stop="innerButtonClicked">内部按钮</button> </div> <script> new Vue({ el: '#app', methods: { handleClick() { console.log('点击了链接'); }, innerButtonClicked() { console.log('点击了内部按钮'); } } }); </script> ``` ##### 结合 `$event` 对象获取更多信息 ```html <div id="app"> <p @mousemove="logCoordinates($event)">移动鼠标可以看到坐标变化</p> </div> <script> new Vue({ el: '#app', methods: { logCoordinates(event) { console.log(`X: ${event.clientX}, Y: ${event.clientY}`); } } }); </script> ``` #### 官方文档中的推荐实践 官方文档建议尽可能使用原生 JavaScript 的方式来处理复杂事件逻辑,而非过度依赖修饰符。这是因为过多的修饰符可能会降低代码可读性和维护性[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值