Vue.jsテンプレート

テンプレートを使用すると、モデルの値をビューにバインドできます。 Vueでは、これは単純なHTMLバインディングを使用して実現できます。

バージョン2以降、Vue.jsでは、HTMLテンプレートに加えて、生のJavaScriptテンプレート（Reactスタイル）を使用できます。この投稿では、HTMLテンプレートについて説明します。

このVue.jsHello World の例から始めて、次のデータモデルを使用してみましょう。

data() {
  return {
    text: 'Hello world',
    htmlContent: 'Hello bold new world!',
    isDisabledAttr: true
  }
}

補間

補間とは、1つ以上の変数を取得し、それらの値を評価して、結果をテンプレートに表示することを指します。 ‘Hello World’文字列のように単純な場合もありますが、より複雑な式の結果である場合もあります。

最も基本的なバージョンは、一般に口ひげ構文として知られている二重中括弧を使用しています。これにより、モデルからテンプレートへの一方向データバインディングが作成されます。テンプレートに生の値を表示します。

一方向バインディングとは、データがモデルからビューに送信されるバインディング方法を指しますが、その逆はありません。

<span>Text binding: {{ text }}</span><br>

上記の例は、単に適切なものを取ります text からの値 data {{text}}タグの代わりにその値をモデル化して表示します。

v-once ディレクティブを使用して、一度バインドし、アイテムの追跡を停止できます。

v-once を使用するということは、後でモデルの値を変更しても、テンプレートに表示される値に影響がないことを意味します。

<span v-once>Text binding: {{ text }}</span><br>

このバインディングでのv-onceの使用は、 text 値は後で変更され、内部の値は span タグはまだ初期値を表示します。

前述のメソッドを使用してHTMLタグを含む文字列をバインドすると、式がプレーンな文字列として出力されます。

HTML内のタグを評価する必要があり、HTMLのソースを信頼している場合は、 v-html を使用して、Vueに文字列をHTMLとして評価するように依頼できます。

<span v-html="htmlContent"></span>

のコンテンツ htmlContent v-html ディレクティブを使用すると、htmlとして評価され、スパンに挿入されます。

値に加えて、Vueテンプレートを使用して要素に属性を追加できます。口ひげの構文の代わりに、 v-bind ディレクティブを使用して、モデルの値を属性にバインドできます。

<button v-bind:disabled="isDisabledAttr">
  Disabled
</button>

<button :disabled="isDisabledAttr">
  Disabled
</button>

上記の例では、 isDisabledAttr モデルから、モデルのdisable属性に設定します。 button 鬼ごっこ。

v-bind：attr = modelValue 構文を使用する代わりに、短い：attr =modelValue構文を使用して同じ効果を得ることができます。

Vueは、データバインディング内の単純な式の評価をサポートしています。

<span>{{ text + ' ' + isDisabledAttr }}</span>

この例では、連結された文字列’Helloworldtrue’を出力します。

Vue構文を使用すると、二重中括弧内に1つの式を含めることができます。これには、制御フローや複数の式を含めることはできません。

Vueは、モデルの変更に応じてテンプレート内でDOMを操作できるようにする、v-というプレフィックスが付いた一連の組み込みディレクティブを提供します。

たとえば、 v-if ディレクティブは、モデル値に基づいて要素を表示/非表示にします。

入力に応じてカスタムDOM操作を行うカスタムディレクティブを作成することもできます。

フィルタをモデル値とともに使用して、ビューに表示するために指定された値を変更できます。

たとえば、一部のテキストをすべて大文字で表示したい場合があります。ここでは、初期モデル値を変更または複製するのではなく、表示の値を動的に変換するフィルターを適用できます。

これを実現するには、フィルターを作成する必要があります。

filters: {
  allCaps: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.toUpperCase();
  }
}

The allCaps 関数は単に文字列を受け取り、すべて大文字の文字列を返します。

ビューでは、フィルターを使用して、初期モデル値を変更せずに表示値を大文字に変換できます。

<span>{{ text | allCaps }}</span>

ここでは、モデルに格納されている「Hello World」値の代わりに、値がビューに送信される前にフィルターが適用されるため、Vueはすべて大文字で「HELLOWORLD」を表示します。