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

概要

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

v-on

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

引数（イベント）

分類	引数（イベント名）	内容
フォーム	focas	要素にフォーカスが入った時
	blur	要素からフォーカスが外れた時
	change	要素の値を変更した時
	select	テキストボックス・テキストウェリアのテキストを選択した時
	submit	フォームから送信した時（formタグに記述）
マウス	click	要素をクリックした時
	dbclick	要素をダブルクリックした時
	mousedown	マウスのボタンを押した時
	mouseenter	要素にマウスポインタが乗った時
	mouseleave	要素からマウスポインタが外れた時
	mouseover	要素にマウスポインタが乗った時
	mouseout	要素からマウスポインタが外れた時
	mousemove	要素の中をマウスポインタが移動した時
	mouseup	マウスのボタンを離した時
キー	keydown	キーを押した時
	keyup	キーを離した時
	keypress	キーを押し続けている時
その他	resize	ウィンドウのサイズを変更した時
	scroll	ページや要素をスクロールした時
	error	エラーが発生した時
	contextmenu	コンテキストメニューを表示する前

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

修飾子

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

v-bind

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

引数

引数	内容
:text-content	テキストとして値をバインドする
:style	スタイルを設定する
:class	クラスを設定する
:id	id=""の値をバインドする
:value	value=""の値をバインドする

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

修飾子

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

v-model

引数なし
v-model.修飾子

修飾子	内容
.number	入力値を数値としてバインドする
.trim	前後の空白を除去する
.lazy	バインドのタイミングを遅らせる（フォーム要素からフォーカスが外れたタイミングでバインド）

その他のディレクティブ

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

参考

Vue.js：ディレクティブ