【Vue.js】よく使うディレクティブまとめ

こんにちは！CODE CLUB965のKです！

今回は、Vue.jsでよく使うディレクティブについてまとめようと思います。

前回の記事で、インスタンスの生成や変数、関数の基本構文についてまとめました。
まだ読んでいない方はぜひ読んでみて下さい。

ディレクティブとは？という方もいると思いますので、簡単に説明すると「htmlタグの中に定義できるVue.js独自の属性」といったところです。

ディレクティブまとめ

v-vind

タグ属性の値をVueインスタンス内で定義した変数で表現する場合に使います。

// html
<div id='app'>
  <a v-bind:href='url'>CODE CLUB 965</a>
</div>

// js
new Vue({
  el: '#app',
  data: {
    url: 'https://codeclub.commits.work/'
  }
})

「v-bind:」は「:」と省略することができます。

<div id='app'>
  <a :href='url'>CODE CLUB 965</a>
</div>

v-on

イベントのトリガーと呼び出す関数を定義する場合に使います。

// html
<div id='app'>
  <p>{{ message }}</p>
  <button v-on:click='methodName'>クリック</button>
</div>

// js
new Vue({
  el: '#app',
  data: {
    message: 'Hello World !'
  },
  methods: {
    methodName: function(){
      // 処理を記述する
    }
  }
})

ちなみに、「v-on:」は、「@」と書くこともできます。

<div id='app'>
  <p>{{ message }}</p>
  <button @click='methodName'>クリック</button>
</div>

v-model

双方向バインディングを行いたい場合に使います。

// html
<div id='app'>
  <input type='text' v-model='message'>
  <p>{{ message }}</p>
</div>

// js
new Vue({
  el: '#app',
  data: {
    message: 'Hello World !'
  }
})

上記の例のように記述することで、テキストフォームで入力した内容が同期してテキスト表示されます。

v-if

ifなのでなんとなく分かるかと思いますが、v-if を使うことで条件に応じて表示させるhtml要素を変更することができます。

// html
<div id="app">
  <button @click="countUp">クリック</button>
  <p>{{ count }}</p>
  <p v-if="isMultipleOf5">5の倍数</p>
  <p v-else-if="isEven">偶数</p>
  <p v-else>奇数</p>
</div>

// js
new Vue({
  el: "#app",
  data: {
    count: 0
  },
  computed: {
    isMultipleOf5: function(){
      return this.count%5==0;
    },
    isEven: function(){
      return this.count%2==0;
    }
  },
  methods: {
    countUp: function(){
      this.count += 1;
    }
  }
})

上記の例は、ボタンをクリックしていくと、計算された数字が条件によって5の倍数か偶数か奇数かが表示されます。
このように v-if は、条件によって表示内容を動的に変えることができます。

v-for

配列やオブジェクトの中身を表示したい場合に使います。

// html
<div id="app">
  <ul>
    <li v-for="alphabet in alphabets">{{ alphabet }}</li>
  </ul>
</div>

// js
new Vue({
  el: "#app",
  data: {
    alphabets: ['A', 'B', 'C']
  }
})

上記の例では、alphabetsという配列の中身をv-forを使って全て表示しています。

最後に

今回は、Vue.jsでよく使うディレクティブについてまとめました。

Vue.jsでは使用する場面が多いと思うのでしっかり覚えておきましょう！

それでは、また！

Follow me!