21目前最全最完善 Vue 事件修饰符

事件修饰符

① 常用字符

  • .stop

    阻止单击事件继续传播(给内部事件添加,可防止事件冒泡)

<div @click="divClick">   <!--不会被触发点击事件-->
  <a @click.stop="itemClick"></a>  <!--点击事件-->
</div>
  • .once

    点击事件只会出发一次

<a @click.once="itemClick"></a>
  • .capture

    捕获冒泡(如果有多个,从外到内依次执行,其余部分从内到外依次执行)

<div @click.capture="divClick">  <!--第一个被捕获-->
  <div @click.capture="div2Click"> <!--第二个被捕获-->
  	<div @click="div2Click">  <!--第四个被捕获-->
  		<a @click="itemClick"></a>  <!--第三个被捕获-->
		</div>
	</div>
</div>
  • .self

    绑定的元素可以避免被冒泡影响

<div @click.capture="divClick">  <!--第一个被捕获-->
  <div @click.self="div2Click"> <!--不会被冒泡影响-->
  	<div @click="div2Click">  <!--第三个被捕获-->
  		<a @click="itemClick"></a>  <!--第二个被捕获-->
		</div>
	</div>
</div>
  • .passive

不拦截默认事件,浏览器不用判断是否阻止,可以提高性能;也可以避免用户页面,而不能迅速滑动

  • .prevent
    1. 拦截默认事件,防止a标签(往往不会因为.stop停止冒泡)发生冒泡事件;
    2. 提交事件不再重载页面
 <form @submit.prevent="onSubmit"></form>
  • .native

    在父组件中给子组件一个事件的绑定,将组件变成普通的标签,才能进行事件触发

② 特殊字符

1. 按键修饰符
  • .enter

    可以检查详细的按键

	<input v-on:keyup.enter="submit" />
2. 按键码
  • .tab
  • .delete(捕获"删除"和"退格"键)
  • .esc
  • .space(空格键)
  • .up
  • .down
  • .left
  • .right
3. 系统修饰符(2.1.0新增)

按下相应按键时才触发鼠标或键盘事件的监听器

  • .ctrl
  • .alt
  • .shift
  • .meta(注意:在各个系统键盘上可能有差异 Mac ==> command 键 (⌘) windows ==> Windows 徽标键 (⊞))
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
4. .exact修饰符(2.5.0新增)

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

<!-- 即使 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>
5. 鼠标按钮修饰符(2.2.0新增)

会限制处理函数仅响应特定的鼠标按钮

  • .left
  • .right
  • .middle

注意1:修饰符可以串联

<a @click.stop.prevent="itemClick"></a>

注意2:passive 和 prevent 有冲突,不能同时绑定(.prevent会被忽略,并报错)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页