Vueの基礎勉強 v-on

Last updated at 2023-11-09Posted at 2023-11-09

(Vue.js 3.1.5を使用)

ボタンをクリックしたときにイベント処理したいなどの時。

v-onディレクティブというものがある。
v-on:イベント名 = "メソッド名"
という構文を使う。

ボタンをクリックすると、コンソールにクリック!と表示される処理。

html

<div id="app">
    <button v-on:click="onClick">クリック!</button>
</div>

v-on:click="onClick" と書いたので、
javascript側の、onClickメソッドが呼ばれる。

javascript

const app = Vue.createApp({
    methods:{
        onClick: function() {
            console.log('クリック!')
        }
    }
})
app.mount('#app')

ボタンを２回クリックしたから、コンソールに、②クリック!と出ている。

v-on:click は、@clickとも書ける。

html

<div id="app">
    <button @click="onClick">クリック!</button>
</div>