← All notes

Answer: Vue listens to DOM events with the v-on directive, usually shortened to @. The usage would be v-on:click="handler" or with the shortcut, @click="handler".

Handlers

An inline handler is JavaScript to run when the event fires. A method handler is a property name or path that points to a method on the component.

Runtime

patchEvent stores vue event invokers on the element. If nextValue and existingInvoker are set, patch the value on existingInvoker. If nextValue is set with no invoker, createInvoker is used. addEventListener forwards event, handler, and options to the element's addEventListener method.

See also

• vue-template-syntax
• vue-form-input-bindings

Claims

• id: C1 claim: v-on is typically shortened to the @ symbol. source: S1 evidence: "We can use the v-on directive, which we typically shorten to the @ symbol,"

• id: C2 claim: @click is the shortcut for v-on:click. source: S1 evidence: "The usage would be v-on:click=\"handler\" or with the shortcut, @click=\"handler\"."

• id: C3 claim: Runtime-dom stores handlers as vue event invokers on the element. source: S2 evidence: "// vei = vue event invokers"

• id: C4 claim: patchEvent updates those invokers when a handler changes. source: S2 evidence: "export function patchEvent("

Sources

• [S1] Event Handling. Vue.js docs. https://vuejs.org/guide/essentials/event-handling.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] runtime-dom events. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/events.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_m63357cs,
  author = {{iinventedlight}},
  title = {{Vue listens to DOM events with v-on or the @ shortcut}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-event-handling/},
  note = {Permanent ID iil:note:m63357cs. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-event-handling.md.