[Vue.js]Vue.jsVue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。[Vue.js]本記事では、Vue.jsのv-bindディレクティブについて紹介します。HTMLの要素はcla...johobase.comv-bindディレクティブでは、「v-bind:」に続けて属性名を指定することで、属性に値(または式)をバインドすることができます。v-bind:属性名=値または式></要素>v-bindディレクティブの通常の書式では属性名をHTMLに記述しますが、属性名はJavaScriptの式から設定することもできます。v-bindディレクティブと並んでよく使用するディレクティブにv-onディレクティブがあります。v-onディレクティブを使用すると、HTML要素のイベントにメソッド(または式)をバインドすることができます。[Vue.js]本記事では、Vue.jsのv-onディレクティブについて紹介します。ユーザーからの操作を受け付ける...johobase.comv-onディレクティブでは、「v-on:」に続けてイベント名を指定することで、イベントにメソッド(または式)をバインドすることができます。v-on:イベント名=メソッドまたは式></要素>v-onディレクティブの通常の書式ではイベント名をHTMLに記述しますが、イベント名はJavaScriptの式から設定することもできます。そこで今回は、v-bindディレクティブで指定する属性名や、v-onディレクティブで指定するイベント名を動的に指定する方法について紹介します。動的引数利用時の注意点ディレクティブの動的引数v-bindディレクティブの属性名、v-onディレクティブのイベント名は、静的に指定する場合は以下のように記述します。v-bind:href="url"v-on:click="onClick">リンク</a>上記のコードでは、v-bindディレクティブの属性名に「href」、v-onディレクティブのイベント名に「click」を指定しています。この属性名とイベント名は[]で囲んで指定(ブラケットで指定)することにより、JavaScriptの式の値から動的に生成することができます。これを「動的引数」と言います。以下にv-bindディレクティブの属性名を動的引数によって指定する例を示します。サンプルコードここでは、a要素(タグ)の属性名を動的引数によって指定する例を示します。'https://johobase.com/'}}}).mount('#app')上記の例ではdataオプションに定義した属性名(attribute)に「href」を指定しているので、a要素のhref属性にurlの値がバインドされます。出力されるHTML上記のサンプルコードを実行(ブラウザーで表示)すると以下のHTMLが出力されます。以下にv-onディレクティブのイベント名を動的引数によって指定する例を示します。サンプルコードここでは、button要素(タグ)のイベント名を動的引数によって指定する例を示します。alert('ボタンがクリックされました。{alert('ボタンがクリックされました。');}}}).mount('#app')上記の例ではdataオプションに定義したイベント名(event)に「click」を指定しているので、button要素のclickイベントにonClickメソッドがバインドされます。動的引数利用時の注意点v-bindディレクティブ、またはv-onディレクティブで使用する動的引数の名前に、大文字が含まれる場合は注意が必要です。Vue.jsの公式ドキュメントには以下の記載があります。プロパティがない場合、このコードは動作しません。プロパティがない場合、このコードは動作しません。</a>上記の例の「someAttr」を動的引数として利用する場合は、JavaScriptに定義するdataオプションのプロパティ名を「someattr」にする必要があります。[Vue.js]本記事では、Vue.jsのv-ifディレクティブについて紹介します。[Vue.js]前回の記事では、キーボードの特定のキーが押されたことを検知して、キーイベントを処理する際に使用するキー修飾子について紹介しました。@」[Vue.js]Vue.jsでは、HTMLテンプレートでディレクティブを使用して、データをバインドしたりDOMを操作したりします。[Vue.js]Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。[Vue.js2.X]Vueを使用したアプリケーションでは、Vue関数を使ってVueの新しいインスタンスを作成することで、アプリケーションが起動されます。$emit)[Vue.js]前回は子コンポーネントに実装したpropsと$emitを利用して、親コンポーネントのデータをやり取り(同期)する方法を紹介しました。[Vue.js]ここでは、componentメソッドを使ったコンポーネントの定義について紹介します。