【Vue.js】ディレクティブって何なのか

ディレクティブとは

Vue.jsに指示を出す仕組みのこと。
v-で始まる属性の総称。

ディレクティブの例

どんなのがあるのか、まとめてみる。

v-bind

データバインディングを行うときに使う。
まずはVue.jsファイルを用意。

var vm = new Vue({
  el: '#vm',
  data: {
    comment: 'Hello Vue.js!'
  }
})

続いて、HTMLファイルを用意

<div id="vm">
  <input type="text" v-bind:value="comment">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

こうすることで、inputタグの初期値をデータバインディングして表示することができる。
マスタッシュ構文は使えないので注意が必要。

v-if

条件分岐を行う。
表示/非表示の切り替えなどが可能。

var vm = new Vue({
  el: '#vm',
  data: {
    toggle: false
  }
})

<div id="vm">
  <p v-if="toggle">
     Hello
   </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

v-ifのプロパティtoggleの値がfalseになっているので、pタグは表示されない。
この際、検証ボタンでDOMツリーを確認するとpタグがなくなっている。
toggleの値をtrueに変えることで、Helloが見えるようになる。

v-show

v-ifと同様条件分岐を行う。
違いはcssのdisplayプロパティをon/offするということ。

var vm = new Vue({
  el: '#vm',
  data: {
    toggle: false
  }
})

<div id="vm">
  <p v-if="toggle">
     Hello
   </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

ここで検証ボタンでDOMツリーを確認すると、pタグが残ったままdisplay: none;になっていることがわかる。
頻繁にon/offする時は、v-showの方が有利。

v-for

forからわかる通り、繰り返しをさせたいときに使う。
書き方はこんな感じ

<要素名 v-for="バリュー in オブジェクト">
  {{ 表示したいバリュー }}
</要素名>

配列の場合

例えば複数のペットを登録しておき、それらをリスト表示させてみる。
まずはVue.jsファイル

var vm = new Vue({
  el: '#vm',
  data: {
    pets: ['Koko', 'Maru', 'Sasuke']
  }
})

<div id="vm">
   <ul>
     <li v-for="pet in pets">{{ pet }}</li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

これでビューを確認するとこうなる。

• Koko
• Maru
• Sasuke

オブジェクトの場合

個人の情報を登録している場合も同様。
例えばヤサゴリのデータがこんな感じであったとする。

var vm = new Vue({
  el: '#vm',
  user: {
    nickname: 'Yasagori',
    place: 'Forest',
    age: 31
  }
})

登録してある値を表示するにはこうする。

<div id="vm">
   <ul>
     <li v-for="value in user">{{ value }}</li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

登録してある値の項目も表示したければこうすれば良い。

<div id="vm">
   <ul>
      <li v-for="(value, item)  in user">
        {{ item }} : {{ value }}
      </li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第2引数が設定したプロパティ名になるので注意。