What is Vue event handling?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex Vue.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
Vue event handling listens to DOM events and runs handlers using the v-on directive (shorthand: @). Inline handlers: <button @click="count++"> — simple expressions; <button @click="handleClick"> — method reference; <button @click="handleClick($event, extraArg)"> — pass arguments. Method handlers: if the expression is a method name (no parentheses), Vue automatically passes the native DOM event as the first argument. Event modifiers: chain modifiers to the event for common operations: @click.stop — call event.stopPropagation(); @click.prevent — call event.preventDefault() (useful for forms: @submit.prevent="onSubmit"); @click.self — only trigger if event target is the element itself (not bubbled from child); @click.once — trigger at most once; @click.passive — improves scroll performance; @click.capture — use capture mode. Key modifiers: @keyup.enter="submit", @keyup.esc="cancel", @keydown.ctrl.s="save" — listen for specific keys. Named aliases: enter, tab, delete, esc, space, up, down, left, right. System modifiers: ctrl, alt, shift, meta. Custom events: components use emit to dispatch events: child: emit("update", newValue); parent: @update="handleUpdate". defineEmits for declaring: const emit = defineEmits(["update", "delete"]);.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex Vue.js answers easy to follow.