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 在监听键盘事件时添加按键修饰符：
enterpage-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
这些修饰符会限制处理函数仅响应特定的鼠标按钮
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
