vue中的事件修饰符主要有哪些,分别是什么作用,vue事件修饰符和按键修饰符

　　本文主要介绍了vue中的事件修饰符once、prevent、stop、capture、self、passive。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

vue中的事件修饰符

1. once

　　仅执行一次。

　　div v-on:click . once= alert( 1 )/div

　　只会在第一次点击时执行，再点击就不行了。

2. prevent

　　防止默认程序(如表单中的summit提交按钮)提交自身，

　　form v-on:submit= alert( who ) action= first _ submit method= get accept-charset= utf-8

　　first_submit

　　得到

　　输入类型=提交名称=

　　/表单

　　现在提交将提交数据和跳转。

　　form v-on:submit . prevent= alert( who ) action= first _ submit method= get accept-charset= utf-8

　　first_submit

　　得到

　　输入类型=提交名称=

　　/表单

　　预防，我不让你直接提交，我也不跳。我只是执行我自己的命名函数。个人觉得这个修改器用的不多，完全不用提交。自己写个点击更方便！

3. stop

　　防止函数被传递。

　　div v-on:click= alert( 1 ) style= width:100%；高度：45px背景色：黑色；

　　div v-on:click= alert( 2 ) style= width:80%；左边距：10%；背景色：白色；

　　123

　　/div

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

　　div v-on:click . capture= alert( 1 ) style= width:100%；高度：45px背景色：黑色；

　　div v-on:click= alert( 2 ) style= width:80%；左边距：10%；背景色：白色；

　　123

　　/div

　　点击子的div，此时的执行结果是先弹出1，再弹出2(2的作用(capture)。

　　div v-on:click . capture . stop= alert( 1 ) style= width:100%；高度：45px背景色：黑色；

　　div v-on:click= alert( 2 ) style= width:80%；左边距：10%；背景色：白色；

　　123

　　/div

　　点击孩子的div。结果只会弹出1(由1(捕获)决定的执行顺序)，alert(2 2 )不会执行。

　　div v-on:click= alert( 1 ) style= width:100%；高度：45px背景色：黑色；

　　div v-on:click . stop= alert( 2 ) style= width:80%；左边距：10%；背景色：白色；

　　123

　　/div

　　这样只会弹出2，而不是1。

　　总之，停就是你可以做自己的事，不要打扰别人。

4. capture和self

　　因为在使用capture和self时会有一些混淆，所以有一篇单独的文章介绍它们。

　　理解vue中的捕捉和自我。

5. passive与prevent相反

　　javascript中的PreventDefault()

　　被动是专门用来对抗他们的，让他们失效。同时，被动不能和prevent同时使用，prevent会失效，会被警告！

vue事件处理（修饰符）

事件修饰符

　　在vue中，为了只处理纯数据逻辑，而不是处理DOM事件细节，vue.js提供了事件修饰符。stop阻止click事件继续传播v-on:click.stop=doThis/a

　　的。防止提交事件不再重载页面表单v-on:submit.prevent/form。capture在添加事件侦听器时使用事件捕获模式，即内部元素触发的事件先在这里处理，然后交给内部元素处理。div v-on: click.capture= dothis ./div。self仅在event.target是当前元素本身时触发处理程序，即事件不是从内部元素div v-on触发的：click.self= do that ./div

　　的。once click事件只会触发一次v-on:click.once=doThis/a

　　的默认行为。被动滚动事件(即滚动行为)将被立即触发，而无需等待“onScroll”完成，这包括event . prevent default() div v-on:scroll . passive= on scroll 的情况./div

　　注意：修饰符可以连接在一起。使用修饰语时，顺序很重要；相应的代码将以相同的顺序生成。因此，使用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素本身的点击。

　　a v-on:click . stop . prevent= do that /a

按键修饰符

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

　　page-down//仅在输入“key”时调用VM . submit()’。

　　输入v-on:keyup.enter=submit

　　//只有当$event.key等于PageDown时，才会调用处理函数

　　输入v-on:keyup . page-down= on pagedown

系统修饰键

　　. ctrl.alt.shift.meta！-备选C -

　　输入v-on:keyup.alt.67=clear

　　！- Ctrl单击-

　　div-on:click . ctrl= do something 做点什么/div

　　注意：请注意修饰键不同于常规键。当与keyup事件一起使用时，触发事件时必须按下修饰键。

　　的。精确修饰符允许您控制由系统修饰符的精确组合触发的事件。

　　！-即使Alt或Shift同时按下，也会触发-

　　按钮v-on:click . ctrl= onClick a/button

　　！-是的，只有在按下Ctrl键时才会触发-

　　按钮v-on:click . ctrl . exact= onctrl click a/button

　　！-仅在未按下系统修饰键时触发-

　　按钮v-on:click . exact= onClick a/按钮

鼠标按钮修饰符

　　这些修饰符left.right.middle将处理函数限制为只响应特定的鼠标按钮。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue中的事件修饰符主要有哪些,分别是什么作用,vue事件修饰符和按键修饰符

目录