プログラミング一覧

propsや$emitを使わずに親子コンポーネント間の通信をする $parent、$refs、$root [Vue.js]

Vue.jsの親子コンポーネント間の通信は、原則としてpropsと$emitを使用します。 子コンポーネントはpropsで親コンポ...

記事を読む

マウスイベントで特定のボタンが押された場合に処理を行うv-onディレクティブのマウス修飾子 [Vue.js]

前回の記事では、キーボードの特定のキーが押されたことを検知して、キーイベントを処理する際に使用するキー修飾子について紹介しました。 ...

記事を読む

キーイベントで特定のキーが押された場合に処理を行うv-onディレクティブのキー修飾子 [Vue.js]

Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。 今回は、キーイベントで特...

記事を読む

イベントを1回のみ実行するv-onディレクティブの.once修飾子 [Vue.js]

Vue.jsではv-onディレクティブを使用することで、HTMLの要素のイベントにイベントハンドラーのメソッドをバインドして処理を行...

記事を読む

イベントをキャプチャフェーズで処理するv-onディレクティブの.capture修飾子 [Vue.js]

前回の記事では.self修飾子を使用して、イベントが発生した要素だけでイベントが処理されるようにする方法について紹介しました。 ...

記事を読む

イベントを現在の要素でのみ処理するv-onディレクティブの.self修飾子 [Vue.js]

前回の記事では、.stop修飾子を使用してイベントの伝播を抑制する方法についてご紹介しました。 JavaScriptの...

記事を読む

イベントの伝搬をストップするv-onディレクティブの.stop修飾子 [Vue.js]

JavaScriptのイベントは、イベントが発生した要素でのみ発生するのではなく、イベントの発生元である用途の親要素や子要素でもイベ...

記事を読む

イベントの既定の動作をキャンセルするv-onディレクティブの.prevent修飾子 [Vue.js]

JavaScriptのイベントには、ブラウザー上で発生する既定の動作が用意されています。 既定の動作とは、ブラウザーがイベントに伴...

記事を読む

1つのコンポーネントに複数のv-modelディレクティブでのバインディングを適用する [Vue.js]

前回の記事では子コンポーネントにpropsと$emitを実装し、親コンポーネントからv-modelディレクティブを使用して双方向バイ...

記事を読む

コンポーネントにv-modelディレクティブを実装する(props, $emit)[Vue.js]

前回は子コンポーネントに実装したpropsと$emitを利用して、親コンポーネントのデータをやり取り(同期)する方法を紹介しました。...

記事を読む

props、$emitで親子コンポーネント間でデータをやり取り(同期)する(v-bind、v-on) [Vue.js]

Vue.jsでは、propsと$emitを使用して、親コンポーネントと子コンポーネントの間でデータをやり取りします。 ...

記事を読む

Vue CLIでプロジェクトを作成する [Vue.js]

Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意され...

記事を読む

コンポーネントに定義したFunction型のpropsにメソッドを渡して処理を行う [Vue.js]

Vue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソ...

記事を読む

v-onディレクティブに複数のイベントを一括指定する [Vue.js]

ここではv-onディレクティブで、複数のイベントをまとめて一括で指定する方法について紹介します。 v-onディレクティブ V...

記事を読む

複数の要素のブロックを描画する<template>(v-if, v-for) [Vue.js]

v-ifディレクティブやv-forディレクティブは、単一の要素に対して指定する必要があります。 例えば、v-ifディレクティブを使...

記事を読む