ディレクティブ

リアクティブディレクティブ

このディレクティブは、それ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。

v-text

ある要素のtextContentを更新します。

内部的には、{{ Mustache }} 挿入も textNode 上の v-text ディレクティブとしてコンパイルされます。

v-html

ある要素の innerHTML を更新します。

ユーザによって与えられるデータを含む v-html は、危険な可能性があります。データソースのセキュリティが安全であると保証される場合は v-html を使うことを勧めますが、それ以外の場合はパイプ(|)を使用して、信頼できない HTML をサニタイズするカスタムフィルタを使用することをお勧めします。

v-show

バインディングの値の真偽値に応じて、要素の display を none にしたり、その要素の元の値にしたりします。

v-class

もし何も属性が与えられなかった場合、このディレクティブは要素の classList にバインディングの値を追加し、値が変更されたときに class が更新されます。

もしディレクティブの属性が与えられたら、その属性はバインディングの値の真偽値に応じてトグルする class になります。複数項目の記法と併せると、非常に便利になります:

1
2
3
4
5
<span v-class="
red : hasError,
bold : isImportant,
hidden : isHidden
">
</span>

別な方法としては、直接ディレクティブをオブジェクトにバインドできます。オブジェクトのキーは、対応する値に基づいてトグルする class のリストになります。

v-attr

要素の(引数によって指定された)属性を更新します。

例:

1
<canvas v-attr="width:w, height:h"></canvas>

0 を除く偽となりうる値は、属性を削除します。

別な方法としては、直接ディレクティブをオブジェクトにバインドできます。オブジェクトのキーは、属性のリストは対応する値に基づいてトグルします。

内部的には、{{ Mustache }} 表現の中の引数を computed v-attr ディレクティブにコンパイルします。

0.12.9 以降では、input 要素で value 属性プロパティが使用された場合、v-attr は属性の代わりに要素に対応する value プロパティをすぐに更新します。例えば、<input value="{{val}}"> は属性の代わりに内在する JavaScript のプロパティも設定します。

<img> 要素上の src 要素を設定するときには、Mustache バインディングの代わりに v-attr を使用するべきです。テンプレートは Vue.js によってコンパイルされる前にブラウザによってパースされるので、ブラウザがイメージの URL を取得しようとしたときに、Mustache バインディングは 404 エラーの原因になり得ます。

v-style

要素にインライン CSS スタイルを適用します。

引数がないときは、結び付けられた値は String 型にも Object 型にもなり得ます。

例:

1
<div v-style="myStyles"></div>
1
2
3
4
5
6
7
8
9
// myStyles はStringにもなり得ます
"color:red; font-weight:bold;"
// もしくはObject:
{
color: 'red',
// camelCase でも dash-case でも動きます
fontWeight: 'bold',
'font-size': '2em'
}

引数があるときは、適用する CSS のプロパティとして使用されます。複数項目の表現と併せて、複数のプロパティを同時に設定することができます:

例:

1
2
3
4
5
<div v-style="
top: top + 'px',
left: left + 'px',
background-color: 'rgb(0,0,' + bg + ')'
">
</div>

v-style も賢く、ブラウザベンダの接頭辞を特定します。したがって、接頭辞を使わない方法が使えます:

1
2
<!-- 例えば、必要であれば -webkit-transform を使用する -->
<div v-style="transform: 'scale(' + scale + ')'"></div>

Internet Exploler では、バージョンに関係なく、HTML のパージングの際に不適切なインラインスタイルを削除してしまうため、style 要素の中に Mustache バインディングを指定する代わりに、 v-style を使用することをお勧めします。

v-on

要素にイベントリスナを割り当てます。イベントタイプは引数によって記述されます。 key フィルタと一緒に使用することができる唯一のディレクティブです。詳しくは、イベントのリスニングを参照してください。

v-model

form の input 要素に Two way (双方向)バインディングを作成します。データはデフォルトでは input イベント毎に同期されます。
より詳しい例は、フォームのハンドリングを参照してください。

v-if

バインディングの値の真偽値に基いて要素の挿入や削除を行います。もし要素が <template> 要素であれば、その内容は状態ブロックとして抽出されます。

例:

1
2
3
4
<template v-if="test">
<p>hello</p>
<p>world</p>
</template>

は、以下を生成します:

1
2
3
4
<!--v-if-start-->
<p>hello</p>
<p>world</p>
<!--v-if-end-->

v-repeat

Array もしくは Object のバインディングのすべてのアイテムの子 ViewModel を作ります。もし値が絶対値であれば、その分の ViewModel が作成されます。それらの子 ViewModel は変更メソッド、例えば push() などが Array や Object 上で呼ばれたときや、その数が増減したときに自動的に生成、削除されます。

引数が何も与えられなかったとき、子 ViewModel は継承された Array の中の要素を $data として直接使用します。もし値が Object でなければ、ラッパーのデータオブジェクトが作られ、エイリアスキー $value を使用しているオブジェクトにその値がセットされます。

例:

1
2
3
4
5
<ul>
<li v-repeat="users">
{{name}} {{email}}
</li>
</ul>

引数が与えられたときは、エイリアスキーを引数の文字列としてラッパーのデータオブジェクトが常に作られます。これにより、テンプレート内でのより明示的なプロパティへのアクセスが可能になります:

1
2
3
4
5
<ul>
<li v-repeat="user : users">
{{user.name}} {{user.email}}
</li>
</ul>

0.12.8 以降では、特別な代替手段としてより自然なシンタックスを利用できます:

1
2
3
4
5
<ul>
<li v-repeat="user in users">
{{user.name}} {{user.email}}
</li>
</ul>

より詳しい説明は、リスト表示を参照してください。

リテラルディレクティブ

リテラルディレクティブはその要素の値を素の文字列として取り扱い、何ともバインドしようとしません。このディレクティブが行うのは、bind() 関数を一度だけ実行することです。リテラルディレクティブはその値の中で Mustache 表現も使用できます。より詳細は動的リテラルを参照してください。

v-transition

Vue.js に対してこの要素への変換を適用することを知らせます。変換クラスは、ある変換のきっかけとなるディレクティブが要素を修正したときか、Vue インスタンスの DOM 生成メソッドが呼ばれたときに適用されます。

より詳しくは、トランジションシステムを参照してください。

v-ref

簡単にアクセス可能なように、親に子コンポーネントへの参照を登録します。コンポーネントや v-repeat で動きます。そのコンポーネントのインスタンスは、その親の $ オブジェクトへアクセス可能です。例は、コンポーネントシステム(子の参照)を参照してください。

v-repeat と共に使用するとき、値はそれにバウンドしている配列に対応するすべての子 Vue インスタンスを含む配列になります。

0.12 以降: もし v-repeat のソースデータがオブジェクトの場合、v-ref はそのオブジェクトの各キーとインスタンスで一致するオブジェクトを返します。

v-el

簡単にアクセス可能にするために、親の Vue インスタンス上で DOM 要素へのリファレンスを登録します。例えば、<div v-el="hi">vm.$$.hi としてアクセス可能です。

エンプティディレクティブ

エンプティディレクティブは属性値が必須ではなく、無視します。

v-pre

この要素とすべての子要素のコンパイルをスキップします。ディレクティブのない大量のノードをスキップすることで、コンパイルのスピード上げます。

v-cloak

このプロパティは関連付けられた ViewModel のコンパイルが終了するまでの間残存します。[v-cloak] { display: none } のような CSS のルールと組み合わせて、このディレクティブは ViewModel が用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。