[Vue.js]Vue.js前回の記事では、キーボードの特定のキーが押されたことを検知して、キーイベントを処理する際に使用するキー修飾子について紹介しました。[Vue.js]Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。今回は、キーイベントで特...johobase.comVue.jsでは、キーボードの特定のキーを判別するためにv-onディレクティブと共に指定するキー修飾子が用意されていますが、マウスの特定のボタンが押されたことを検知するためのマウス修飾子も用意されています。そこで今回は、キー修飾子に続いてマウス修飾子について紹介します。マウスイベントでのシステムキーVue.jsのマウス修飾子マウス修飾子を利用することで、Left、Right,、Middleなどのマウスの特定のボタンに応じたイベントをv-onディレクティブでバインドすることができます。マウス修飾子を利用して特定のマウスボタンを判別することで、右クリックした際のコンテキストメニューの表示などの処理を行うことができます。マウス修飾子の実装例ここでは、マウス修飾子を使用する例を紹介します。以下の例では、div要素の右クリックでコンテキストメニューに見立てたリスト(ul~li要素)を表示しています。左クリックでは、表示されているコンテキストメニューを非表示にしています。右クリックでコンテキストメニューを表示します。左クリックでコンテキストメニューが非表示になります。v-on:click.right.prevent="onClickRight"v-on:click.left="onClickLeft"class="box">右クリックでコンテキストメニューを表示します。<br>左クリックでコンテキストメニューが非表示になります。false;}}}).mount('#app')div要素の右クリック時の処理は「v-on:click.right」でバインドしています。左クリック時の処理は「v-on:click.left」になります。dataオプションに定義しているpositionプロパティは、コンテキストメニューを表示する位置情報になります。isShowプロパティは、コンテキストメニューの表示有無を表します。右クリックの処理でマウスイベントの情報から位置情報のpositionプロパティを設定し、表示するためにisShowプロパティをtrueにしています。上記のコードを実行すると以下のような結果が表示されます。マウスイベントでのシステムキーキー修飾子で紹介した.ctrl、.shift、.altなどのシステムキー修飾子は、マウス修飾子と組み合わせて使用することもできます。マウスの左ボタンクリックとCtrlキーを組み合わせて、v-onディレクティブにイベントをバインドする場合は、以下のようになります。Ctrlキーと左ボタンクリック時にイベントが発生します。v-on:click.left.ctrl="onClickLeft">Ctrlキーと左ボタンクリック時にイベントが発生します。[Vue.js]本記事では、Vue.jsのv-showディレクティブについて紹介します。[Vue.js]本記事では、Vue.jsのv-forディレクティブについて紹介します。[Vue.js]本記事では、Vue.jsで作成するアプリケーションの算出プロパティを定義するcomputedプロパティオプションについて紹介します。world!」が使われることがとても多いです。[Vue.js]ここでは、Vue.jsのv-htmlディレクティブについて紹介します。[Vue.js]Vue.jsでは、通常、親コンポーネントから子コンポーネントにデータを渡す時にはpropsを使います。[Vue.js]v-ifディレクティブやv-forディレクティブは、単一の要素に対して指定する必要があります。[Vue.js]ここでは、Vue.jsのv-cloakディレクティブについて紹介します。マスタッシュ(Mus...記事を読むVue.jsのオプション構成(インスタンスのプロパティ)ここでは、Vue.jsのオプション構成(インスタンスのプロパティ)について紹介します。