サンプルコードから基礎を学ぶ！Vue.js入門講座！【ディレクティブ編】

今回はこのような質問をいただきました。

ディレクティブってなに？
どんなことができるの？

以前、こちらでざっくりと解説しましたが今回はより詳しく解説していきます。

あわせて読みたい

Vue.jsのディレクティブをざっくり解説！【JavaScript】

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

ディレクティブとはVue.js専用の属性！

ディレクティブとはVue.js専用の属性のことを指します。

属性とはhrefとかsrcとかのことですね。

hrefやsrcのように、Vue.jsは特別な属性（ディレクティブ）を持ちます。

この属性は属性名の最初にv-をつけて表します。

いろいろなディレクティブを使ってみよう！

では実際にディレクティブを使ってみましょう。

v-text：textContentを更新する

v-textは対象の要素のtextContentを更新します。

これは{{ }}を使用して挿入した場合と同じ挙動になります。

v-html：HTMLとして出力する

v-htmlはデータをHTMLとして出力します。

v-textとほとんど同じですが、HTMLタグが効きます。

v-bind：属性値をデータに対応付ける

v-bindは属性値をデータに対応付けます。

属性の値としてプロパティの値を使用したい場合に使用します。

v-bind:は:に省略できます。

どちらを使ってもよいのですが、どちらかに統一したほうが可読性が向上します。

v-on：イベント発生時に処理を行う

v-onはイベント発生時に特定の処理を行います。

v-on:は@に省略できます。

v-bindと同様にどちらかに統一したほうが良いです。

v-once：一度だけ描画する

v-onceは一度だけ描画させたい場合に使用します。

描画しているプロパティの値が書き換わったとしても初期の状態が維持されます。

v-model：双方向データバインディングを作成する

v-modelは双方向データバインディングを作成します。

モデルの情報をビュー側から変更できます。

実際に動かしてみるとよく分かると思います。

テキストボックスに何か入力したら、すぐに入力した文字が表示されますよね。

これが双方向データバインディングです。

イベント修飾子を使ってみよう！

イベント修飾子とは次のようなメソッドの呼び出しを簡単にしてくれるものです。

.prevent：対象の要素のイベントをキャンセルする

.preventは対象の要素のイベントをキャンセルします。

例えばaタグに指定することでページ遷移をキャンセルすることができます。

1つ目のaタグと2つ目のaタグは同じ処理が実行されています。

リンクをクリックすると、aタグのデフォルトの挙動（ページ遷移）が止まっていることがわかると思います。

.stop：親要素への伝播をキャンセルする

.stopは親要素への伝播をキャンセルします。

特定の要素のみ、クリックイベントの伝搬を止めたい場合等に使用します。

1つ目のbuttonタグと2つ目のbuttonタグは同じ処理が実行されています。

”ボタン”という文字の部分をクリックするとアラートが表示され、”（ここは反応しないよ！）”の部分をクリックすると何も起こらないと思います。

これはクリックイベントの伝搬を止めているからです。

キー修飾子を使ってみよう！

キー修飾子とは特定のキーを押した時のみイベントを発火するようにするものです。

今回のような場合はEnterが押されたときだけshowAlertが実行されます。

1つ目のテキストボックスではキーが入力されるたびにアラートが表示されます。

このように特定のキーが入力された場合にイベントを実行することも可能です。

まとめ

ディレクティブと修飾子、いかがだったでしょうか？

これがディレクティブと修飾子の基本となります。

Vue.jsを扱う上で非常に重要な概念となります。

しっかりと覚えておきましょう。

もし忘れてしまったら、また戻ってきて復習してみてください！

関連記事

あわせて読みたい

サンプルコードから基礎を学ぶ！Vue.js入門講座！【Hello World編】

あわせて読みたい

サンプルコードから基礎を学ぶ！Vue.js入門講座！【テンプレート構文編】