Vue绑定事件v-on(@)与修饰符

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue使用v-on指令绑定事件，简写为@，其用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

1.修饰符

  • stop - 调用 event.stopPropagation(),停止冒泡。

  • prevent - 调用 event.preventDefault()，组织浏览器默认事件。

  • capture - 添加事件侦听器时使用 capture 模式。

  • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

  • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  • native - 监听组件根元素的原生事件。

  • once - 只触发一次回调。

  • left - (2.2.0) 只当点击鼠标左键时触发。

  • right - (2.2.0) 只当点击鼠标右键时触发。

  • middle - (2.2.0) 只当点击鼠标中键时触发。

  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

2.示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

//在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：
<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

以上是 Vue绑定事件v-on(@)与修饰符 的全部内容， 来源链接： utcz.com/z/378479.html

回到顶部