zoukankan      html  css  js  c++  java
  • Vue绑定事件v-on(@)与修饰符

    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>
  • 相关阅读:
    java学习笔记(5)
    java学习笔记(4)
    java学习笔记(3)
    java学习笔记(2)
    java学习笔记(1)
    很棒的Nandflash资料
    Tx2440_Lcd
    git-github学习心得
    多文档编辑器
    假设检验
  • 原文地址:https://www.cnblogs.com/niejunchan/p/12866436.html
Copyright © 2011-2022 走看看