Vue3 v-on Directive

Vue3 内置指令Vue3 Built-in Directives

v-onThe directive is used to bind event listeners, and can listen to DOM events or custom events.

Basic Description

v-onThe directive is used to bind event handler functions to elements. It can be used to listen to native DOM events, as well as events emitted by custom components.

  • Shorthand: @
  • Expected Type: Function | Inline Statement | Object
  • Function: Bind event listeners, supports native DOM events and custom events.

Basic Usage

Example

<!-- Full syntax -->
<button v-on:click="handleClick">Click</button>

<!-- Shorthand -->
<button @click="handleClick">Click</button>

Example

<template>
  <div>
    <button @click="count++">Increase</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

Event Modifiers

Example

<!-- Prevent event bubbling -->
<button @click.stop="handleClick">Stop propagation</button>

<!-- Prevent default behavior -->
<form @submit.prevent="handleSubmit">
  <button type="submit">Submit</button>
</form>

<!-- Trigger on Enter key press -->
<input @keyup.enter="handleEnter" placeholder="Press Enter to submit" />

Vue3 内置指令Vue3 Built-in Directives

Other Extensions