Vue.jsが提供している主なディレクティブについて要点をまとめます。「v-ifとv-showの違い」「v-forを利用する上での注意点」などを確認していきます。
Mustache構文( {{}} )
ディレクティブではないですが、v-html
と比較して説明しておきたいので取り上げます。
<div>Length: {{ list.length }}</div>
v-html
と異なり、プレーンなテキスト
して扱います。- 内部に単一のJavaScript式を含むことができます。
- https://jp.vuejs.org/v2/guide/syntax.html#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88
ディレクティブ
v-html
<div v-html="rawHtml"></div>
{{}}
と異なり、プレーンなHTML
として扱います。- XSSに注意が必要です。まずは、
{{}}
の利用を検討します。 - https://jp.vuejs.org/v2/guide/syntax.html#%E7%94%9F%E3%81%AE-HTML
v-bind( : )
<div :class="{ red: isRed }"></div>
<div :class="[ classA, classB ]"></div>
<div :class="[ 'navbar', { 'is-active': visibleNav } ]"></div>
- 要素の属性を束縛します。
- 省略記法(
:
)が利用できます。 - 親から子コンポーネントへと動的にデータを渡すのにも利用されます。
- https://jp.vuejs.org/v2/api/#v-bind
v-if
<div v-if="isTokyo">
Tokyo
</div>
<div v-else-if="isOsaka">
Osaka
</div>
<div v-else>
Not Tokyo/Osaka
</div>
- 条件付きでレンダリングします。
- 要素自体を制御します。
- https://jp.vuejs.org/v2/guide/conditional.html#v-if
v-show
<div v-show="isTokyo">Tokyo</div>
- 条件付きでレンダリングします。
- CSSで制御(
display: none
)します。 v-if
より切り替えコストが低いです。- https://jp.vuejs.org/v2/guide/conditional.html#v-show
v-for
<div v-for="(item, index) in items"></div>
- 配列、オブジェクトのプロパティなどのリスト操作に利用します。
key属性
を指定すべきです。v-if
とは同じ要素に利用すべきではありません。- インデックスでアイテムを直接設定しても変更を検知できないので、代わりに
vm.$set
を利用します。 - https://jp.vuejs.org/v2/guide/list.html#v-for
v-on( @ )
<form @submit.prevent></form>
<app-modal
@open="handleOpen"
@close="handleClose"/>
- イベントハンドリングに利用します。
- 省略記法(
@
)が利用できます。 stop
prevent
などのイベント修飾子
も利用できます。enter
up
など、キーコードチェックを行うためのキー修飾子
も利用できます。- https://jp.vuejs.org/v2/guide/events.html
v-model
<input v-model="name">
<input v-model.trim="message">
- フォーム入力時の双方向データバインディングに利用します。
number
trim
などの修飾子を利用できます。- フォームタイプ(
input
textarea
checkbox
など)によって指定方法にバリエーションがあります。 - https://jp.vuejs.org/v2/guide/forms.html