省略記法

完全な構文

<button v-on:click="clickHandler">
	click!
</button>

省略記法

<button @click="clickHandler">
	click!
</button>

インラインメソッドハンドラ

<div id="app">
    <p>{{ counter }}</p>
    <button v-on:click="counter++">Click</button>
</div>

const app = Vue.createApp({
    data: () => ({
        counter: 0
    })

})
app.mount('#ap

メソッドイベントハンドラ

• v-on属性の値にはJS式を記述していく方法には限界がある

<button v-on:click="counter++">

• v-onの属性の値に、イベントハンドラのメソッド名を書く方法

<div id="app">
    <p>{{ counter }}</p>
    <button v-on:click="counter++">Click1</button>
    <button v-on:click="clickHandler">Click2</button>
    <button v-on:click="clickHandler()">Click3</button>
		🔼()は引数がない時に、省略することが可能
</div>

const app = Vue.createApp({
    data: () => ({
        counter: 0
    }),
    methods: {
        clickHandler: function () {
            this.counter++

        }
    }

})
app.mount('#app')

イベントオブジェクトを参照する

Sample

ボタンをクリックした時に、htmlのidを取得する方法