vue中的事件修饰符once,prevent,stop,capture,self,passive

更新时间：2022年04月22日 08:55:36 作者：翼晗

这篇文章主要介绍了vue中的事件修饰符once,prevent,stop,capture,self,passive，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue中的事件修饰符

1. once

只执行一次

<div v-on:click.once='alert("1")'></div>

只有在第一次点击时会执行，再次点击不会起作用

2. prevent

阻止默认程序，比如form表单中的summit提交按钮，会自己提交，

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

现在的submit会进行数据提交，和跳转

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

prevent，直接不让你提交了，也不跳转，只是执行自己命名的函数，个人觉得这个修饰符使用的并不多，完全可以不做submit，我自己写个click更方便啊！！

3. stop

阻止函数的传递

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div会，先弹出2，再弹出1

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

点击子级的div，此时的执行结果是，先弹出1，再弹出2（capture的作用）

<div v-on:click.capture.stop='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

点击子级的div，此时的执行结果是只会弹出1（capture决定的执行顺序），不会执行alert(‘2’)

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

这样就只会弹出2，不会弹出1 了

总之，stop就是你自己执行你的就好了，别去打扰别人。

4. capture和self

因为在使用capture和self的时候有一些迷糊，有一篇单独介绍他俩个的文章

初步理解vue中的capture和self

5. passive与prevent相反

javascript中的preventDefault()

passive就是专门用来跟他们作对的，使他们不起作用，同时，passive不能和prevent同时使用，prevent会失效，而且会警告！！

vue事件处理（修饰符）

事件修饰符

在vue中为了只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节，vue.js提供了事件修饰符。

.stop 阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

.prevent 提交事件不再重载页面

<form v-on:submit.prevent></form>

.capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

.self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

<div v-on:click.self="doThat">...</div>

.once 点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，这其中包含 `event.preventDefault()` 的情况

<div v-on:scroll.passive="onScroll">...</div>

注：修饰符可以串联，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<a v-on:click.stop.prevent="doThat"></a>

按键修饰符

vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

enter
page-down

//只有在 `key` 是 `Enter` 时调用 `vm.submit()`
<input v-on:keyup.enter="submit">
//处理函数只会在 $event.key 等于 PageDown 时被调用
<input v-on:keyup.page-down="onPageDown">

系统修饰键

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
 
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

注：请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
 
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
 
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Vue.js v-for不支持IE9的解决方法
这篇文章主要介绍了详解Vue.js v-for不支持IE9的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue-cli 为项目设置别名的方法
这篇文章主要介绍了vue-cli 为项目设置别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
微信小程序地图导航功能实现完整源代码附效果图（推荐）
这篇文章主要介绍了微信小程序地图导航功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue如何实现动态改变地址栏的参数值
这篇文章主要介绍了vue如何实现动态改变地址栏的参数值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
前端JS也可以连点成线详解(Vue中运用AntVG6)
这篇文章主要给大家介绍了关于前端JS连点成线(Vue中运用 AntVG6)的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-01-01
Element Table 自适应高度的实现示例
el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下
2024-07-07
Vuejs第十篇之vuejs父子组件通信
这篇文章主要介绍了Vuejs第十篇之vuejs父子组件通信的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
vue获取当前点击的元素并传值的实例
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
这篇文章主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue实现模糊查询的简单示例
在Vue中实现模糊查询,你可以使用JavaScript的filter和includes方法,结合Vue的v-for指令,本文给大家举了一个简单的示例,并通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
2024-01-01