vue.jsの代表的なディレクティブをマスターしよう!

vue.jsの代表的なディレクティブをマスターしよう!

vueの主要なディレクティブ一覧

  • v-text:要素のテキストを更新
  • v-html:HTML要素を更新
  • v-bind:属性のテキストを更新
  • v-show:要素の表示/非表示を更新
  • v-if:分岐を行う
  • v-for:処理を繰返す
  • v-on:イベントハンドラを登録
  • v-model:form系タグに双方向データバインディングを作成

今回は、「v-text」「v-html」「v-bind」「v-show」について紹介していきます!
その他のディレクティブについては、少し複雑なので別記事で紹介します。

ディレクティブの種類はvueのバージョンによって、かなり異なるので注意してください。
本サイトでは「2.0以降」を想定しています。

要素のテキストを更新してみよう(v-text)

<div id="app">
  <div v-text="message"></div>

  <!-- 以下の記述と同じ -->
  <div>{{ message }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'HELLO!'
  }
});

ある要素のテキストを変更する際に、「v-text」を使用します。
しかし、「v-text」は前回の【基本的な記述方法を覚えて動的に文字を出力させてみよう!!】でも紹介をした、二重中括弧{{}}でも同じ実装が出来ます。

二重中括弧の方が記述量が少ないので、オススメですが、実際の現場では「v-text」を使っている場合も多いので覚えておきましょう!!

HTML要素を更新してみよう(v-html)

<div id="app">
  <div v-html="html_message"></div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    html_message: '<span>HTML要素です!</span>'
  }
});

ある要素にHTMLを挿入する際に、「v-html」を使用します。
上記の例だとspanタグは文字列ではなく、HTML要素として出力されます。
JSでいうと「innerHTML」、jQueryでいうと「$.text()」と同じ挙動ですね!

「v-html」を使用する際には、出力する文字列が安全であることをキチンと確認しましょう!
出力する文字列がユーザが自由に入力できる文字列になると、クロスサイトスクリプティング(XSS)という攻撃を受ける危険性があります。(vueに限ったことではないですが。)

「v-html」は、サービス運営をする人が設定する場合やあらかじめ決められたHTMLを出力する場合のみに限定しましょう!

HTML属性の値を更新してみよう(v-bind)


<div id="app">
  <img v-bind:class="src_data" v-bind:src="class_data">

  <!-- 以下のように省略できます。 -->
  <img :class="src_data" :src="class_data">
</div>
var vm = new Vue({
  el: '#app',
  data: {
    src_data: '/image/hoge.png',
    class_data: 'active'
  }
});

各HTMLタグの属性の値を変えるためには「v-bind」を使用します。
上記の例だとimgタグにクラス(active)と画像のパス(/image/hoge.png)を動的に設定しています。
jQueryでいうと「$.attr()」と同じ挙動になります。

また、「v-bind」は頻繁に使うので、記述を省略することが出来ます。
通常だと「v-bind:class=”hoge”」のように記述しますが、「:class=”hoge”」のように記述することが出来ます。

要素の表示/非表示を更新してみよう(v-show)

<div id="app">
  // この要素は表示されます
  <div v-show="is_active"></div>

  // この要素は表示されません
  <div v-show="not_active"></div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    is_active: true,
    not_active: false
  }
});

各要素の表示非表示を変えるためには「v-show」を使用します。
「v-show」は単純に「display」の値を変えているので、ユーザーに見られてしまうとマズいデータはこれを使わないようにしましょう!

まとめ

v-text

<div id="app">
  <div v-text="message"></div>

  <!-- 以下の記述と同じ -->
  <div>{{ message }}</div>
</div>
  • HTMLにテキストを変更する際に使用する
  • 二重中括弧{{}}でも同じ意味を持っている(こちらがオススメ!)
  • jQueryの「$.text()」と同じ

v-html

<div id="app">
  <div v-html="html_message"></div>
</div>
  • HTML要素を変更する際に使用する
  • 使用する際はクロスサイトスクリプティング(XSS)もキチンと考慮する
  • jQueryの「$.html()」と同じ

v-bind

<div id="app">
  <img v-bind:class="src_data" v-bind:src="class_data">

  <!-- 以下のように省略できます。 -->
  <img :class="src_data" :src="class_data">
</div>
  • HTMLの属性を変更する際に使用する
  • jQueryの「$.attr()」と同じ
  • 「:class=””」のように記述を省略できる

v-show

<div id="”app”">
  <div v-show="”is_active”"></div>
</div>
  • 要素の表示非表示を変更する際に使用する
  • 「display」の値のみを変えている