テンプレートの構文


基盤となる実装では、Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。 Vue を応答システムと組み合わせると、再レンダリングが必要なコンポーネントの数をインテリジェントに計算し、DOM 操作の数を最小限に抑えることができます。

仮想 DOM に精通していて、JavaScript の生の機能を好む場合は、オプションの JSX 構文を使用して、テンプレートを使用せずに render 関数を直接記述することもできます。


#ディレクトリ



##テキスト


データ バインディングの最も一般的な形式は、「Mustache」構文 (二重中括弧) を使用したテキスト補間です。 

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

Mustache タグは、対応するデータ オブジェクトの msg## に置き換えられます # 属性の値。バインドされたデータ オブジェクトの msg プロパティが変更されるたびに、補間ポイントのコンテンツが更新されます。

v-once

ディレクティブを使用すると、1 回限りの補間を実行することもでき、データが変化しても補間時点の内容は更新されません。ただし、これはノード上の他のデータ バインディングに影響することに注意してください: 

<span v-once>这个将不会改变: {{ msg }}</span>

##raw HTML

Double中括弧はデータを HTML コードではなく通常のテキストとして解釈します。実際の HTML を出力するには、

v-html
ディレクティブを使用する必要があります: 

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

この span のコンテンツは、HTML として直接属性値 rawHtml に置き換えられます。解析された属性値のデータ バインディングは無視されます。 Vue は文字列ベースのテンプレート エンジンではないため、v-html を使用して部分テンプレートを作成することはできないことに注意してください。対照的に、ユーザー インターフェイス (UI) の場合、コンポーネントは再利用可能で構成可能な基本単位として適しています。

サイト上で動的にレンダリングされる任意の HTML は、XSS 攻撃 に簡単につながる可能性があるため、非常に危険です。 HTML 補間は信頼できるコンテンツにのみ使用し、#決して 補間をユーザー提供のコンテンツには使用しないでください。


機能

Mustache 構文は HTML 機能に適用できません。 v-bind ディレクティブ を使用する必要があります: 

<div v-bind:id="dynamicId"></div>

ブール型プロパティ (存在するだけで値が true であることを意味します)、v-bind この例では、動作が少し異なります: 

<button v-bind:disabled="isButtonDisabled">Button</button>

isButtonDisabled の値が null、unknown、または false の場合 の場合、disabled 属性は、レンダリングされた <button> 要素にも含まれません。


JavaScript 式の使用

これまでのテンプレートには、単純なプロパティ キー値をバインドするだけでした。しかし実際には、すべてのデータ バインディングに対して、Vue.js は完全な JavaScript 式サポートを提供します。 

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

これらの式は、それらが属する Vue インスタンスのデータ スコープ内で JavaScript として解析されます。各バインディングには 単一の式 のみを含めることができるという制限があるため、次の例は 有効ではありません。 

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

テンプレート式はサンドボックスに配置され、

Math や Date などのグローバル変数のホワイトリストにのみアクセスできます。テンプレート式内のユーザー定義のグローバル変数にアクセスしようとしないでください。


##ディレクティブ

ディレクティブには
v の特別なプロパティがあります。 -

プレフィックス。ディレクティブ属性の値は、単一の JavaScript 式であることが想定されます (v-for は例外であり、これについては後で説明します)。このディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。冒頭で見た例を振り返る: 

<p v-if="seen">现在你看到我了</p>
ここで、

v-if

ディレクティブは、式 seen# の true または false の値に基づいて挿入/削除します。 ##<p> 要素。


パラメータ

一部のコマンドは、コマンド名の後のコロンで表される「パラメータ」を受け取ることができます。たとえば、v-bind ディレクティブを使用すると、HTML 属性を応答的に更新できます。 

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

ここで、href は v-bind## に指示するパラメータです。 # ディレクティブは、この要素の href 属性を式 url の値にバインドします。

もう 1 つの例は、DOM イベントをリッスンするために使用される

v-on ディレクティブです。 

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

ここでのパラメータは、リッスンするイベントの名前です。 。イベント処理についても詳しく説明します。


#動的パラメータ##2.6.0 新規追加

# # 2.6.0 以降、角括弧で囲まれた JavaScript 式をコマンドのパラメータとして使用できます: 

<a v-bind:[attributeName]="url"> ... </a>

ここの
attributeName

は JavaScript 式として動的に評価されます。取得した値は最終パラメータとして使用されます。たとえば、Vue インスタンスに

data

属性 attributeName と値 "href" がある場合、このバインディングは v -bind と同等になります。 :href。 同様に、動的パラメーターを使用してハンドラー関数を動的イベント名にバインドできます: 

<a v-on:[eventName]="doSomething"> ... </a>
同様に、

eventName

の値が

" focus の場合「

, v-on:[eventName] は v-on:focus と同等になります。 動的パラメータの値に対する制約

動的パラメータは文字列として評価されることが期待されており、例外的に値は null になります。この特別な

null

値を使用して、バインディングを明示的に削除できます。その他の非文字列値があると、警告がトリガーされます。 動的パラメータ式の制約

スペースや引用符などの特定の文字が HTML に配置されるため、動的パラメータ式にはいくつかの構文制約があります。無効です。同様に、DOM でテンプレートを使用する場合は、キー名を大文字にしないようにする必要があります。

たとえば、次のコードは無効です: 

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

回避策は、スペースや引用符のない式を使用するか、そのような複雑な式を計算されたプロパティに置き換えることです。

さらに、DOM でテンプレートを使用する場合 (テンプレートを HTML ファイルに直接記述する場合)、ブラウザはすべての属性名を強制的に小文字にすることに注意する必要があります: 

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>


Modifier

Modifier (修飾子) は、半角ピリオドで指定される特殊な接尾辞です。命令は特別な方法で処理される必要があるということ。バインディング。たとえば、.prevent 修飾子は、トリガーされたイベントに対して

event.preventDefault()

を呼び出すように v-on ディレクティブに指示します: 

<form v-on:submit.prevent="onSubmit">...</form>
次に、v-on

や v-for などの機能を探索するときに、修飾子の他の例が表示されます。

略語

v- プレフィックスは、テンプレート内の Vue 固有の機能を識別するための視覚的な手がかりとして機能します。 Vue.js を使用して既存のタグに動的な動作を追加する場合、v- プレフィックスは便利ですが、頻繁に使用される一部の命令では、使用するのが面倒に感じられる場合があります。また、Vue がすべてのテンプレートを管理する SPA - シングル ページ アプリケーション を構築する場合、v- プレフィックスはそれほど重要ではなくなります。したがって、Vue では、最も一般的に使用される 2 つの命令、v-bind と v-on に固有の略語を提供しています。


v-bind の省略形

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

…


##v-on の省略形 

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

…

通常の HTML とは若干異なるように見えるかもしれませんが、

: は属性名の @ と同じです。これらはすべて有効な文字です。 Vue をサポートするすべてのブラウザで正しく解析できます。また、最終的にレンダリングされるマークアップには表示されません。略語構文は完全にオプションですが、その役割をよく理解すると、省略構文があるとうれしくなるでしょう。