ディレクティブとは？
ディレクティブとは、HTMLタグの中に定義できるVue.js独自の属性です。属性は、なんらかの機能の付与に必要になるものです。HTMLのimageタグでいうと、「src=””」や「alt=””」といった部分が属性に当たります。HTMLの属性が、Vue.jsだとディレクティブとなります。
ディレクティブを使用することで、Vue.jsがその属性を監視し、その値に応じて要素の振る舞いや表示を制御することができます。
よく使うディレクティブと使い方について
v-on（省略形あり） イベントハンドラ
v-onディレクティブは、HTML要素に対してイベントをバインド（割り当てる）します。例えば、以下のようにボタン要素にクリックイベントをバインドすることができます。
<button v-on:click="doSomething">Click me</button>HTMLのonClick属性のような感じです。
ちなみにv-onには省略形があります。「v-on:」を消して「@」に変更しても同じく動作します。
<button @click="doSomething">Click me</button>v-if 条件分岐
v-ifディレクティブは、条件式の結果に応じて要素を表示・非表示にするためのものです。以下の例では、isDisplayedというVue.jsのデータがv-ifディレクティブに渡され、isDisplayedがtrueの場合にp要素が表示されます。
<p v-if="isDisplayed">Hello, Vue.js!</p>v-for 繰り返し
v-forディレクティブは、配列やオブジェクトなどのデータをループ処理し、HTML要素を繰り返し生成するために使用されます。主にリストの表示などに使われます。
以下の例では、items配列の各要素をループ処理して、<li>要素に表示します。v-forディレクティブの構文は、”item”という変数を定義し、”items”という配列から各要素を取り出してループ処理を行うことを示しています。
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
items: [1, 2, 3],
},
});
</script>
// 出力結果
1
2
3v-bind（省略形あり） HTML属性との連携
v-bindディレクティブは、HTMLの属性とVueのデータを連携する場合に使います。以下の例では、Vueインスタンスのデータを変更することで、img要素のsrc属性の値が変更されます。
<div id="app">
<div v-bind:class="color">カラー</div>
</div>
<script>
new Vue({
el: "#app",
data: {
color: "red",
},
});
</script>
// 出力結果
<div class="red">カラー</div>なお、v-bindには省略形があります。「v-bind」を消して「:」だけでも同じく動作します。
<div :class="color">カラー</div>v-model HTMLとデータの双方向の連携を実現
v-modelディレクティブでは、HTML上のデータとVueのデータを連動させることができます。主にformのinputタグなどと一緒に使われます。
