データバインディング構文

Vue.js は DOM ベースのテンプレートの実装を使用しています。これは、全ての Vue.js テンプレートは本質的に有効になり、特別な属性で拡張された HTML を解析可能になるということを意味します。また、Vue のテンプレートは本質的に文字列ベースのテンプレートとは異なるということを忘れないでください。

展開

テキスト

データバインディングの最も基本的な形式は、”Mustache” 構文(2 重中括弧)を使用するテキスト展開です:

<span>Message: {{ msg }}</span>

mustache タグは対応するデータオブジェクト内の msg プロパティの値に置き換えられます。また、データオブジェクトの msg プロパティが変更される時、それに応じて常に更新されます。

データの更新ができない、一度だけ (one-time) の展開も実行できます:

<span>This will never change: {{* msg }}</span>

生の HTML

2重中括弧の mustache は HTML としてではなく、プレーンなテキストとしてデータを解釈します。リアルな HTML を出力するためには、3重中括弧の mustache を使用する必要があります:

<div>{{{ raw_html }}}</div>

コンテンツは、プレーンな HTML として挿入され、データバインディングは無視されます。テンプレート部品の再利用が必要な場合、partials を使用すべきです。

web サイトで動的に任意の HTML をレンダリングすることは、XSS 攻撃に容易につながってしまうので非常に危険です。信頼されたコンテンツにだけ HTML 展開を使用してください。ユーザーによって提供されたコンテンツを決して使用してはいけません。

属性

Mustache は HTML 属性内部でも使用することができます:

<div id="item-{{ id }}"></div>

属性の展開が Vue.js ディレクティブと特別な属性では許可されないということに注意してください。でも心配しないでください、Vue.js は mustache が間違った場所で使用されているとき、あなたに警告をするでしょう。

バインディング式

mustache タグ内部のテキストは バインディング式 と呼ばれています。Vue.js において、バインディング式は、1つまたは複数のフィルタを持つことができる単一の JavaScript 式で構成されています。

JavaScript 式

今まで、私たちはテンプレート内の単純なプロパティキーだけ考えることを義務付けられていました。しかし、Vue.js は実際にはデータバインディング内部の JavaScript 式を全力でサポートします:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

これらの式は、自身の Vue インスタンスのデータスコープで評価されます。各バインディングは単一式のみを含むことができるという制限があります。なので、以下は動作しません:

<!-- これは文、式ではありません: -->
{{ var a = 1 }}

<!-- フロー制御はどちらも動作しません、三項演算子式を使用します -->
{{ if (ok) { return message } }}

フィルタ

Vue.js は式の終わりに任意の”フィルタ”を追加することができ、”パイプ(‘|’)” シンボルを使ってそれを示します:

{{ message | capitalize }}

ここでは、大文字の値を返すだけの JavaScript 関数の組み込み capitalize フィルタを通して、message 式の値を”パイプ”しています。Vue.js はいくつかの組み込みフィルタを提供しています、後ほど独自のフィルタを作成する方法について説明します。

パイプ構文は JavaScript 構文の一部ではないことに注意してください。したがって、式内部にフィルタを混ぜることはできません。式の終わりにだけ追加することができます。

フィルタはつなぎ合わせることができます:

{{ message | filterA | filterB }}

フィルタは引数を取得できます:

{{ message | filterA 'arg1' arg2 }}

フィルタ関数は常に最初の引数として式の値を受け取ります。クォートされないものは式として評価される一方、クォートされた引数はプレーンな文字列として解釈されます。ここでは、プレーンな文字列 'arg1' は第2引数としてフィルタに渡され、式 arg2 の値は評価されて、第3引数として渡されます。

ディレクティブ

ディレクティブは接頭辞 v- による特別な属性です。ディレクティブ属性の値はバインディング式として期待されるので、上記で言及したJavaScript 式とフィルタについてのルールが、ここでも同様に適用されます。ディレクティブの役割は、その式の値が変更されるとき、 DOM に対してリアクティブに特殊な動作を適用することです。イントロダクションで見た例を見てみましょう:

<p v-if="greeting">Hello!</p>

ここで、v-if ディレクティブは、式 greeting の値が真かどうかに基づいて、<p> 要素を削除/挿入します。

引数

いくつかのディレクティブは、ディレクティブ名の後のコロン (:) によって、”引数”を持てます。例えば、v-bind ディレクティブは HTML 属性をリアクティブに更新するために使用されます:

<a v-bind:href="url"></a>

ここで href は、v-bind ディレクティブに、式 url の値とエレメントの href 属性をバインドするように伝える引数です。あなたは href="{{url}}" を使用した属性の展開と同様の結果になることを気づいたかもしれませんが、それは正しいです。実際に、属性の展開は内部では v-bind バインディングに翻訳されています。

次の例は DOM イベントをリッスンする v-on ディレクティブです:

<a v-on:click="doSomething">

ここでの引数は、DOM イベントをリッスンするためのイベント名です。更にイベントハンドリングついては、詳細に説明します。

修飾子

修飾子 (Modifier) はドット(.)によって表記された特別な接尾語で、ディレクティブがいくつかの特別な方法でバインドされるべきということを示します。例えば、.literal 修飾子はディレクティブに、属性値が式よりもむしろリテラル文字列として解釈されるよう伝えます:

<a v-bind:href.literal="/a/b/c"></a>

もちろん、この例はディレクティブを使用する代わりに href="a/b/c" で同じことができるため、無意味に思われます。構文をデモするために、この例を出しました。後で、修飾子のより実用的な使用方法を確認しましょう。

省略記法

v- 接頭辞は、テンプレート内で Vue 固有の属性を見つけるための視覚的な手がかりとして役にたちます。これは、Vue.js を使用して既存のマークアップに動的な振舞いを適用するときは便利ですが、頻繁に使用されるいくつかのディレクティブに対しては冗長だと感じるかもしれません。同時に、v- 接頭辞の必要性は、Vue.js が全てのテンプレートを管理する SPA を構築するとき、それほど重要とはなりません。そのため、Vue.js は最も頻繁に使用されるディレクティブ v-bind と v-on の2つに対して、特別な省略記法を提供します:

v-bind 省略記法

<!-- 完全な構文 -->
<a v-bind:href="url"></a>

<!-- 省略記法 -->
<a :href="url"></a>

または

<!-- 完全な構文 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 省略記法 -->
<button :disabled="someDynamicCondition">Button</button>

v-on 省略記法

<!-- 完全な構文 -->
<a v-on:click="doSomething"></a>

<!-- 省略記法 -->
<a @click="doSomething"></a>

これらの省略記法は、通常の HTML と少し異なって見えるかもしれませんが、全ての Vue.js は、ブラウザがそれを正しく解析することをサポートし、最終的にレンダリングされたマークアップには表示されません。省略記法は任意ですが、後で詳細な使用方法を学習するとき、恐らくそれに感謝することでしょう。