- イベントハンドリング
- イベントが発生時に使用する
- ディレクトリとして記載するときには、()はどっちでもいい。引数を渡したい時には記載する
<button @click="countUp">+1</button>
or
<button @click="countUp()">+1</button>
- マスタッシュ記述をする時には、()をつける必要がある
🙅♂️
<p>{{ doubleCounterMethod }} </p>
🙆♂️
<p>{{ doubleCounterMethod() }} </p>
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
<div id="app">
<button v-on:click="onClick">Click!</button>
<p>{{ now }}</p>
</div>
<script>
const app = Vue.createApp({
data: () => ({
now: '-'
}),
methods: {
onClick: function(){
this.now = new Date().toLocaleString()
}
}
})
app.mount('#app')
</script>
</body>
</html>
<button @[event]="countUp">カウントアップ</button>
キー修飾子
- キーボードの処理に対するDOMイベントで使用する
- キーアップやキーダウンの時に使用する
- イベント修飾子を同じ様にチェインメソッドが可能(順番は関係なし)
<input type="text" @keyup.enter.space="myAlert">
🔼スペースやエンターを押した時に、メソッド動く
new Vue({
el: "#app",
data: {
number: 0,
event: 'click'
},
methods: {
countUp() {
this.number += 1
}
}
});
<input type="text" @keyup="myAlert">
.space