vue.jsの使い方の基礎＃５【v-onの使い方】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（イベントハンドラの部分）
公式ドキュメントとやっていることは基本的に同じです。

Vue.js基礎知識に関する記事を随時更新しています一覧はこちら。もしよければ参考にしてください。

v-onの基本的な使い方

v-onディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。

<!-- ボタンを押下するとcounterを１つづ加算していく -->
<div>
  <button @click="counter += 1">+1</button>
  <p>ボタン押下数 ： {{ counter }}</p>
</div>

---　以下略　---

メソッドを呼びたいとき

先ほどの例では、１づつ加算していく簡単な処理なのでいいですが、押下したらデータ登録する～などの処理を書いていたら良くないですよね。
v-onでは呼び出したいメソッド名を指定することができます。メソッドを呼ぶときは()をつける必要があります。

<template>
    <div>
    <button @click="addCounter()">+1</button>　---クリックされたらaddCounter()メソッドを呼ぶ
    <p>ボタン押下数 ： {{ counter }}</p>
    </div>
</template>

<script>

export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        addCounter() {
            this.counter ++
        }
    }
}
</script>

メソッドに引数に渡す引数を指定することもできます

<template>
    <div>
    <button @click="addCounter(1)">+1</button>
    <button @click="addCounter(2)">+2</button>
    <p>ボタン押下数 ： {{ counter }}</p>
    </div>
</template>

--- 略 ---
<script>
    methods: {
        addCounter(num) {
            this.counter += num
        }
    }
</script>

複数のメソッドを呼びたいとき

以下のようにカンマで区切ることで、複数のメソッドが設定できます。
以下の例では、ボタン押下するとone()とtwo()が実行されます。

<template>
    <div>
    <button @click="one(), two()">ボタン</button>
    </div>
</template>

--- 以下略 ---

イベント修飾子

イベントハンドラ内でのevent.preventDefault()またはevent.stopPropagation()の呼び出しがしたいとき、イベント修飾子（event modifiers）が使用できます。

jsは正直そんなにやっていなかったのでevent.preventDefault()ってなんやねんってなりました。
フォームさんは優秀なので、デフォルトでフォーム内容送信などやってくれるのですが、この動作をキャンセルする目的で使うらしい。

この辺の記事がわかりやすかったです。
JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識
【JavaScript】event.preventDefault()が何をするのか

修飾子一覧

修飾子は、ドット(.)で表記されます。

修飾子	内容
.stop	event.stopPropagation()を呼ぶ
.prevent	event.preventDefault()を呼ぶ
.capture	ルート要素から順番にイベント実行
.self	event.target が要素自身のときだけハンドラ呼び出し（子要素の場合は呼ばれない）
.once	最大１回までハンドラを呼び出す
.passive	event.preventDefault()を呼び出さない（event.preventDefault()を含んでいたとしても）

書き方

以下公式の引用です。

<!-- クリックイベントの伝搬が止まります -->
<a @click.stop="doThis"></a>


<!-- submit イベントによってページがリロードされません -->
<form @submit.prevent="onSubmit"></form>


<!-- イベントリスナーを追加するときにキャプチャモードで使います -->
<!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます -->
<div @click.capture="doThis">...</div>


<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
<!-- 言い換えると子要素のときは呼び出されません -->
<div @click.self="doThat">...</div>


<!-- 最大1回、クリックイベントはトリガされます -->
<a @click.once="doThis"></a>


<!-- `onScroll` が `event.preventDefault()` を含んでいたとしても -->
<!-- スクロールイベントのデフォルトの挙動(つまりスクロール)は -->
<!-- イベントの完了を待つことなくただちに発生するようになります -->
<div @scroll.passive="onScroll">...</div>

補足

以下のような書き方もできます。こちらも公式引用

<!-- 修飾子は繋げることができます -->
<a @click.stop.prevent="doThat"></a>

<!-- 値を指定せず、修飾子だけ利用することもできます -->
<form @submit.prevent></form>

また、修飾子を使用するとき、関連するコードが同じ順序で生成されます。
@click.prevent.selfを使用すると全てのクリックイベントを防ぐことはできますが、@click.self.preventは要素自身におけるクリックイベントを防ぐだけです。複数使用する場合は順序もしっかり考えましょう。

以下の注意もありました。

.passive と .prevent を一緒に使わないでください。.prevent は無視され、ブラウザにはおそらく警告が表示されます。.passive はイベントのデフォルトの挙動を妨げないことをブラウザに伝達することを思い出してください。

個人的にこの辺は理解が難しいのでjsをもう少し勉強してから学びなおそう。。。

キー修飾子

いろいろなイベントがある中で、特定のキーのチェック（enterを押下など）が必要な時にキー修飾子をつけることができます。

<!-- `key` が `Enter` のとき、`submit()` が呼ばれます  -->
<input @keyup.enter="submit" />

キー修飾子一覧

先ほどはkeyupを使用しましたが、キーボードイベントには以下があります。

修飾子	内容
keypress	タイプしたとき
keydown	押されたとき
keyup	押し終わったとき

最も一般的に使用されるキーコードのエイリアスを提供してくれています

修飾子	内容
.enter	enterキー
.tab	tabキー
.delete	delete と backspace キーの両方
.esc	escキー
.space	スペースキー
.up	方向キー上
.down	方向キー下
.left	方向キー左
.right	方向キー右

KeyboardEvent.keyで公開されている任意のキー名は、ケバブケースに変換することで修飾子として直接使用できるそうです。大体のイベントは使用できそうですね。
私はキャメル > スネーク > ケバブの順で好きです（いらない情報）

以下の例では、keyがPageDownのときにonPageDown()が呼ばれます。

<input @keyup.page-down="onPageDown" />

システム修飾子キー

次の修飾子を使用すると、対応するキーが押されたときにのみマウスもしくはキーボードのイベントリスナをトリガできます。
つまり、同じイベントでも異なったイベントとして扱うことができるようになる修飾子です。例えば、

enterを押下した時と、ctrl + enterを押したときで違う処理ができるわけです。

以下公式から引用

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

システム修飾子キー一覧

修飾子	内容
.shift	shiftキー
.ctrl	ctrlキー
.alt	altキー
.meta	Mac:コマンドキー（⌘） windows:ウィンドウキー（⊞）
.exact	修飾子のパターンを制限
.left	マウス左クリック
.right	マウス右クリック
.middle	マウス真ん中（スクロールするところ）クリック

.exactの書き方。以下公式引用です。

<!-- これは Ctrl に加えて Alt や Shift キーが押されていても発行されます -->
<button @click.ctrl="onClick">A</button>

<!-- これは Ctrl キーが押され、他のキーが押されてないときだけ発行されます -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- これは システム修飾子が押されてないときだけ発行されます -->
<button @click.exact="onClick">A</button>

公式わかりやすいので今回引用多めでした。日本語で見れるのありがたい。
vueの記事ちょこちょこあげてるのでよかったらコメントなどいただけるととてもうれしいです。

最後まで読んでいただきありがとうございます！