【Vue.js】ディレクティブの引数と修飾子など

# 概要
Vue.jsのディレクティブに関する簡易的なメモです。
覚えきれないので表にしてまとめただけです。
コンポーネントに関する内容は割愛しています。
自分が多少なりに使うものをメモする程度なので網羅しているわけではありません。

# v-on
v-on:引数.修飾子
または
@引数.修飾子

## 引数（イベント）
<table>
<tr>
<th>分類</th>
<th>引数（イベント名）</th>
<th>内容</th>
</tr>

<tr>
<td rowspan=5>フォーム</td>
<td>focas</td>
<td>要素にフォーカスが入った時</td>
</tr><tr>
<td>blur</td>
<td>要素からフォーカスが外れた時</td>
</tr><tr>
<td>change</td>
<td>要素の値を変更した時</td>
</tr><tr>
<td>select</td>
<td>テキストボックス・テキストウェリアのテキストを選択した時</td>
</tr><tr>
<td>submit</td>
<td>フォームから送信した時（formタグに記述）</td>
</tr><tr>

<td rowspan=9>マウス</td>
<td>click</td>
<td>要素をクリックした時</td>
</tr
><tr>
<td>dbclick</td>
<td>要素をダブルクリックした時</td>
</tr>
<tr>
<td>mousedown</td>
<td>マウスのボタンを押した時</td>
</tr>
<tr>
<td>mouseenter</td>
<td>要素にマウスポインタが乗った時</td>
</tr>
<tr>
<td>mouseleave</td>
<td>要素からマウスポインタが外れた時</td>
</tr>
<tr>
<td>mouseover</td>
<td>要素にマウスポインタが乗った時</td>
</tr>
<tr>
<td>mouseout</td>
<td>要素からマウスポインタが外れた時</td>
</tr>
<tr>
<td>mousemove</td>
<td>要素の中をマウスポインタが移動した時</td>
</tr>
<tr>
<td>mouseup</td>
<td>マウスのボタンを離した時</td>
</tr>
<tr>

<td rowspan=3>キー</td>
<td>keydown</td>
<td>キーを押した時</td>
</tr>
<tr>
<td>keyup</td>
<td>キーを離した時</td>
</tr>
<tr>
<td>keypress</td>
<td>キーを押し続けている時</td>
</tr>

<tr>
<td rowspan=4>その他</td>
<td>resize</td>
<td>ウィンドウのサイズを変更した時</td>
</tr>
<tr>
<td>scroll</td>
<td>ページや要素をスクロールした時</td>
</tr>
<tr>
<td>error</td>
<td>エラーが発生した時</td>
</tr>
<tr>
<td>contextmenu</td>
<td>コンテキストメニューを表示する前</td>
</tr>

</table>

※mouseenter/mouseleaveとmouseover/mouseoutは対象となる要素が異なる。
・mouseenter/mouseleave
イベントの対象となる要素マウスポインタが出入りした際に発生。
・mouseover/mouseout
イベント対象の要素の内側の要素にマウスポインタが出入りした際にも発生。

## 修飾子
<table>
<tr>
<th>修飾子</th>
<th>内容</th>
</tr>

<tr>
<td>.stop</td>
<td>親要素への伝播を中止する</td>
</tr>
<tr>
<td>.prevent</td>
<td>規定の動作をキャンセル</td>
</tr>
<tr>
<td>.capture</td>
<td>キャプチャモードで動作</td>
</tr>
<tr>
<td>.self</td>
<td>要素自信の場合にだけ実行</td>
</tr>
<tr>
<td>.once</td>
<td>一度だけ実行</td>
</tr>
<tr>
<td>left</td>
<td>マウスが左クリックされた時のみ実行</td>
</tr>
<tr>
<td>right</td>
<td>マウスが右クリックされた時のみ実行</td>
</tr>
<tr>
<td>middle</td>
<td>マウスの中央ボタンがクリックされた時のみ実行</td>
</tr>
<tr>
<td>.passive</td>
<td>Passiveモードを有効化</td>
</tr>

</table>

# v-bind
v-bind:引数.修飾子
または
:引数.修飾子

## 引数

<table>
<tr>
<th>引数</th>
<th>内容</th>
</tr>

<tr>
<td>:text-content</td>
<td>テキストとして値をバインドする</td>
</tr>
<tr>
<td>:style</td>
<td>スタイルを設定する</td>
</tr>
<tr>
<td>:class</td>
<td>クラスを設定する</td>
</tr>
<tr>
<td>:id</td>
<td>id=""の値をバインドする</td>
</tr>
<tr>
<td>:value</td>
<td>value=""の値をバインドする</td>
</tr>
</table>

他にもlabel要素の`for`などのhtml要素の属性名に対応しています。

## 修飾子
<table>
<tr>
<th>修飾子</th>
<th>内容</th>
</tr>
<tr>
<td>.prop</td>
<td>プロパティに値をバインドする</td>
</tr>
<tr>
<td>.camel</td>
<td> ケバブケースの属性名をキャメルケースに変換する</td>
</tr>
<tr>
<td>.sync</td>
<td>バインド値を更新する</td>
</tr>
</table>


# v-model
引数なし
v-model.修飾子

<table>
<tr>
<th>修飾子</th>
<th>内容</th>
</tr>

<tr>
<td>.number</td>
<td>入力値を数値としてバインドする</td>
</tr>

<tr>
<td>.trim</td>
<td>前後の空白を除去する</td>
</tr>

<tr>
<td>.lazy</td>
<td>バインドのタイミングを遅らせる（フォーム要素からフォーカスが外れたタイミングでバインド）</td>
</tr>
</table>

# その他のディレクティブ
<table>
<tr>
<th>ディレクティブ</th>
<th>内容</th>
</tr>

<tr>
<td>v-cloak</td>
<td>初期化のタイミングで破棄されるディレクティブ</td>
</tr>
<tr>
<td>v-html</td>
<td>エスケープせずにHTMLを埋め込む</td>
</tr>
<tr>
<td>v-onece</td>
<td>起動時に一度だけ処理する</td>
</tr>
<tr>
<td>v-pre</td>
<td>mustache構文を無効化する</td>
</tr>
<tr>
<td>v-if</td>
<td>
条件式の真偽値を求める。<br/>
v-else、v-else-ifにより条件分岐する。<br/>
また、key属性を付することで同一のif式と判別することができる。</td>
</tr>
<tr>
<td>v-for</td>
<td>
配列の場合は「v-for="(item[, index]) in items"」と記述。<br/>
オブジェクトの場合は「v-for="(value, key[, index]) in ovject"」と記述。<br/>
v-forはv-ifより優先して処理される。
</td>
<tr>
<td>v-show</td>
<td>条件式の真偽に応じて、要素のCSSプロパティ"display"を変更する</td>
</tr>
</table>


# 参考
[Vue.js：ディレクティブ](https://jp.vuejs.org/v2/api/#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96)