🟢 Lesson 03 — Events & Methods

1. @click — Click Event

v-on:click နဲ့ @click နှစ်မျိုးလုံး တူတူပဲ (@click က shorthand)

<button @click="count++">Inline</button>
<button @click="increment">Method</button>
<button @click="addBy(5)">Add 5</button>

methods: {
  increment() { this.count++ },
  addBy(n)    { this.count += n }
}

2. @input / @change / @keyup

<input @input="onInput">        <!-- every keystroke -->
<input @change="onChange">      <!-- blur / Enter -->
<input @keyup.enter="onEnter">  <!-- Enter key only -->
<input @keyup.esc="clear">      <!-- Escape key -->

3. Mouse Events

@click       → single click
@dblclick    → double click
@mouseover   → hover enter
@mouseout    → hover leave
@mousemove   → mouse move

4. Event Modifiers

@click.prevent   → event.preventDefault()
@click.stop      → event.stopPropagation()
@click.once      → run only once
@click.self      → only if clicked the element itself

5. $event — Passing the Event Object

<button @click="sayHello('Mg Mg', $event)">Greet</button>

methods: {
  sayHello(name, event) {
    console.log(name, event.target)
  }
}