Vue.js
データバインディング

テキスト

データバインディングの最も基本的な形式は、 "Mustache"構文（二重中括弧）を使用したテキスト補間です。

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

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

データ変更時に更新しない1回限りの補間を実行することもできます。

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

生のHTML

ダブルキャッチは、データをHTMLではなくプレーンテキストとして解釈します。実際のHTMLを出力するには、トリプルマストを使用する必要があります：

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

内容はプレーンHTMLとして挿入されます。データバインディングは無視されます。テンプレート部分を再利用する必要がある場合は、partialを使用する必要があります。

属性

MustachesはHTML属性の中でも使うことができます：

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

Vue.jsディレクティブと特殊属性では、属性の補間は許可されません。心配する必要はありませんが、Vue.jsは、くぼみが間違った場所で使用されているときに警告を発します。

フィルタ

Vue.jsでは、式の末尾にオプションの「フィルタ」を追加することができます。これは「パイプ」記号で表されます。

{{ message | capitalize }}

ここでは、組み込みのcapitalizeフィルタを使用してmessage式の値を「配管」しています。これは、大文字の値を返すJavaScript関数です。 Vue.jsにはいくつかの組み込みフィルタが用意されており、後で独自のフィルタを書く方法についても説明します。

パイプ構文はJavaScriptシンタックスの一部ではないため、式の中にフィルタを混在させることはできません。あなたは式の最後にそれらを追加することしかできません。

フィルタは連鎖することができます：

{{ message | filterA | filterB }}

フィルタは引数を取ることもできます：

{{ message | filterA 'arg1' arg2 }}

フィルタ関数は、式の値を常に最初の引数として受け取ります。引用符で囲まれた引数は平易な文字列として解釈され、引用符で囲まれていない引数は式として評価されます。ここでは、平文の文字列'arg1'が2番目の引数としてフィルタに渡され、式arg2の値が評価され、3番目の引数として渡されます。