vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue事件修饰符

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

作者:翼晗

这篇文章主要介绍了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提供了事件修饰符。

<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
<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 在监听键盘事件时添加按键修饰符:

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

系统修饰键

<!-- 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>

鼠标按钮修饰符

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

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

您可能感兴趣的文章:
阅读全文