ふりぶろぐ
Web Engineer's Blog
JavaScript

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

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

このような疑問にお答えします。

この記事の内容
  • ディレクティブとはVue.js専用の属性!
  • いろいろなディレクティブを使ってみよう!
  • イベント修飾子を使ってみよう!
  • キー修飾子を使ってみよう!

超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう!

今回はディレクティブについて解説していきます。

読んでほしい人
  • Vue.jsが初めての人
  • Vue.jsを復習したい人
  • Vue.jsを動かしてみたい人

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

Elements

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

hrefsrcのように、Vue.jsは特別な属性(ディレクティブ)を持ちます。
この属性は属性名の最初にv-をつけて表します。

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

Selecting

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

v-text:textContentを更新する

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

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

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

v-htmlはデータをHTMLとして出力します。
v-textとほとんど同じですが、HTMLタグが効きます。

ユーザが入力した値を入れるとXSSの危険があるので注意!

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

v-bindは属性値をデータに対応付けます。
属性の値としてプロパティの値を使用したい場合に使用します。

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

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

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

v-on:@に省略できます。
v-bindと同様にどちらかに統一したほうが良いです。

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

v-onceは一度だけ描画させたい場合に使用します。
描画しているプロパティの値が書き換わったとしても初期の状態が維持されます。

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

v-modelは双方向データバインディングを作成します。
モデルの情報をビュー側から変更できます。

双方向データバインディングとは?

データが更新されたとき、表示も更新される仕組みのことです。

実際に動かしてみるとよく分かると思います。
テキストボックスに何か入力したら、すぐに入力した文字が表示されますよね。

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

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

Events

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

  • event.preventDefault() … 対象の要素のイベントをキャンセルする
  • event.stopPropagation() … 親要素への伝播をキャンセルする

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

.preventは対象の要素のイベントをキャンセルします。
例えばaタグに指定することでページ遷移をキャンセルすることができます。

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

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

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

.stopは親要素への伝播をキャンセルします。
特定の要素のみ、クリックイベントの伝搬を止めたい場合等に使用します。

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

”ボタン”という文字の部分をクリックするとアラートが表示され、”(ここは反応しないよ!)”の部分をクリックすると何も起こらないと思います。
これはクリックイベントの伝搬を止めているからです。

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

Key points

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

今回のような場合はEnterが押されたときだけshowAlertが実行されます。
1つ目のテキストボックスではキーが入力されるたびにアラートが表示されます。

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

まとめ

ディレクティブと修飾子、いかがだったでしょうか?
これがディレクティブと修飾子の基本となります。

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

しっかりと覚えておきましょう。
もし忘れてしまったら、また戻ってきて復習してみてください!

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。