【Vue.js】ディレクティブについて

はじめに

こんにちは。
Vue.jsのディレクティブについてアウトプットしていきます！

ディレクティブとは

ディレクティブとは、 DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。

参照：https://012-jp.vuejs.org/guide/directives.html

タグに付与する属性のことで、冒頭にv-が付きます。
いくつか紹介していきます。

v-bindディレクティブ

属性へのデータバインディングのときに使用する。

HTML

<div id="app">
  <input type="text" v-bind:value="message">
</div>

Vue.js

var app = new Vue({
  el: '#app',
  message: 'Hello!'
})

v-ifディレクティブ

要素の表示や非表示を「真偽値」を使用して切り替えることができる。

HTML

<div id="app">
  <p v-if="toggle">
    Hello!
  </p>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    toggle: true  //trueまたはfalse
  }
})

trueの場合は、Hello!が表示される。
falseの場合、toggleで指定したpタグはDOMごと非表示になる。

v-showディレクティブ

要素の表示や非表示を「真偽値」を使用して切り替えることができる。
v-ifディレクティブとの違いは、falseの場合CSSのdisplay:noneを適用させる。

HTML

<div id="app">
  <p v-show="toggle">
    Hello!
  </p>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    toggle: true  //trueまたはfalse
  }
})

trueの場合は、Hello!が表示される。
falseの場合、toggleで指定したpタグはdisplay:noneで非表示になる。

v-forディレクティブ

オブジェクトの繰り返しを行う際に使用する。
<タグ名 v-for="変数 in データの配列"> {{変数}} </タグ名>で記述する。

HTML

<div id="app">
  <ol>
    <li v-for="color in colors"> {{ color }} </li>
  </ol>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    colors: ['red','blue','yellow']
  }
})

配列colorsの値がv-forディレクティブにより繰り返されて、全てリスト表示される。

v-onディレクティブ

クリックイベントなどの処理を行いたい場合に使用する。

HTML

<div id="app">
  <button v-on:click="onclick">
    Click!
  </button>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  methods: {
    onclick: function(){
      alert('onclick');
    }
  }
})

ボタンをクリックするとアラートが呼ばれる処理を実行する。

最後に

ここまでディレクティブについてまとめました。
まだ一部のディレクティブしか紹介しきれていないので、これからもまとめていきたいと思います！