08 vue 指令 v-on 事件监听

6/27/2021 vue

事件处理 — Vue.js (opens new window)

API — v-on (opens new window)

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

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

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

# 事件传参数

1 普通写法

<button v-on:click="doThis('message content')"></button>
<button v-on:click="doThis()"></button> <!-- 此时,函数收到的 message 参数为 undefined -->
doThis(message){
    console.log(message);
}

2 默认写法

<button v-on:click="doThis"></button>
// 这里收到的是 MouseEvent 对象
doThis(event){
    console.log(event);
}

3 完整自定义写法

<button v-on:click="doThat('hello', $event)"></button>
// 这里 message 收到的是 'hello'
// 这里 event 收到的是 MouseEvent 对象
doThis(message, event){
    console.log(message);
    console.log(event);
}

# 事件修饰符

事件处理 — Vue.js (opens new window)

  • 阻止单击事件继续传播
  <!-- .stop 修饰符的使用 -->
  <div @click="divClick">
    aaaaaaa
    <!-- 点击按钮时,divClick 将不会被触发 -->
    <button @click.stop="btnClick">按钮</button>
  </div>
  • 阻止默认事件
  <!-- .prevent 修饰符的使用 -->
  <form action="baidu">
    <!-- 阻止默认事件(阻止了默认的提交行为) -->
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  • 按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
  • 点击事件将只会触发一次
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
更新时间: Sunday, June 27, 2021 17:45