ディレクティブとは
Vue.jsでは、HTMLに対して独自の属性を追加することでDOM操作を行うことができます。
この独自の属性のことをディレクティブと呼んでいます。
ディレクティブ名は全てv-から始まります。
主要なディレクティブ
v-ifとv-show
要素の表示と非表示を切り替えたい場合、v-ifもしくはv-showを使います。
どちらも属性値が真の場合は要素を表示し、偽の場合は非表示にします。
<p v-if=”値”>
</p>
<p v-show=”値”>
</p>
どちらも表示と非表示を切り替えることができますが、その実現方法が異なります。
属性値の判定結果に応じて、v-ifはDOM要素の追加と削除、v-showはdisplayプロパティの値の変更によって実現しています。
一般的にスタイルの変更よりもDOM要素の操作のほうがレンダリングコストが高くなります。
そのため属性値の判定結果が頻繁に変わる場合はv-show、ほぼ変わらない場合はv-if、というように使い分けます。
v-for
v-forで、配列もしくはオブジェクトのデータをリストレンダリングできます。
属性値は変数名 in 配列という構文が使われます。
<li v-for="変数名 in 配列">
</li>
配列のindexが必要な場合、(変数名, index) in 配列と記述できます。
v-on
v-onはchangeやinputなどのイベントが起きた時に、属性値の式を実行します。
DOM APIのaddEventListenerのようなものです。
<input v-on:イベント名=”実行したい式”>
v-onはよく使われるため、以下のように省略して記述できます。
v-on:change → @change
v-model
v-modelは双方向データバインディングを実現するディレクティブです。
DOMで変更があった時、その値をVueインスタンスのデータとして更新します。
逆にVueインスタンスのデータに変更があった時、DOMを更新します。
<input v-model=”値”>
v-modelを使用できるのは、inputタグ、selectタグ、textareaタグです。
ユーザーが入力した内容を、値として保持できるようになります。
v-bind
v-bindはHTML要素の属性に、特定のデータを渡す際に利用できます。（データバインディング）
<p v-bind:属性名=”値”>
</p>
例えばclass属性をバインディングして、特定の条件の時にclassを付与する、といった使い方ができます。
v-on同様、よく使われるため以下のように省略して記述できます。
v-bind:class → :class
終わりに
本記事で紹介したディレクティブの使用例を作成しました。
参考文献