テンプレートの構文
宣言的にバインド基礎となるデータのVueインスタンスのDOMに開発することができますHTMLベースのテンプレートの構文を使用してVue.js。すべてのVue.jsテンプレートは、正当なHTMLであるため、標準的なブラウザとHTMLパーサをたどることができます。
基本となる実装では、Vueが仮想テンプレートDOMのレンダリング機能にコンパイルされます。応答システムを結合、我々は、Vueのがインテリジェントに再レンダリングが最小数の部品を必要と計算処理の数とDOMを最小限に抑えることができます。
補間
テキスト
：データは、最も一般的な形式は、「口ひげ」構文（中括弧）テキスト補間を使用することであるバインディング
<span>Message: {{ msg }}</span>
口ひげタグは、対応するデータオブジェクトに置き換えられますmsg属性。データがバインドされたオブジェクトたびmsgプロパティが変更され、コンテンツが補間で更新されます。
使用することにより、Vをワンス指示データの変更は、コンテンツが補間で更新されていない場合、あなたは、1回の補間を行うことができます。しかし、注意を払うが、これはノードにバインディング他のデータに影響を与えますしてください。
<span v-once>这个将不会改变: {{ msg }}</span>
属性
口ひげ文法はあなたが使用する必要があり、その場合、HTML属性に作用することができないv-bind命令を。
<div v-bind:id="dynamicId"></div>
ブール属性（長いがあるとしてとしてあることを意味するためにtrue、）はv-bind：一緒に仕事をすると、この例では、わずかに異なっています
<button v-bind:disabled="isButtonDisabled">Button</button>
場合
isButtonDisabled値はnull、undefinedまたはfalse、disabled属性もレンダリングされた``要素に含まれません。
JavaScriptを使用式
実際には、すべてのデータが結合のために、Vue.jsはフルサポートJavaScript式を提供します。
{{ number + 1 }}
<!-- 这是语句，不是表达式所以下面这句不生效上面的生效 -->
{{ var a = 1 }}
{{ ok ? 'YES' : 'NO' }}
//下面这个流程控制不会生效，只有上面的三元运算符才生效
{{ if (ok) { return message } }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
命令
コマンド（指令）v-特殊な属性の接頭辞。命令属性の期待値は、単一のJavaScript式（v-for我々は後で議論し、例外です）。応答DOM演技生成される式の値も影響を与えることをDUTY指示。我々は導入で見た例を想起：
<p v-if="seen">现在你看到我了</p>
ここで、v-if式に従って命令はseen、真理値の``要素を削除/挿入します。
- パラメータ
「パラメータ」を受けることができるいくつかの命令は、命令名の後にコロンによって表されます。例えば、v-bind命令は応答更新HTML属性を使用することができます。
<a v-bind:href="url">...</a>
ここでhref通知するパラメータ、あるv-bindの命令要素href表現の属性urlバインディングの値が。
別の例は、v-onDOMイベントをリッスンするために使用されるコマンド：
<a v-on:click="doSomething">...</a>
ここで、引数は、イベント・モニターの名前です。
- 動的パラメータ
2.6.0新
コマンドのパラメータとしてJavaScript式に角括弧を使用して、開始から2.6.0、：
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<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属性名に置き、スペースや引用符などの特定の文字は、無効であるため、いくつかの制約があります。例えば：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
別のアプローチは、表現にはスペースまたは引用符を使用しない、または算術的特性と、この複雑な式を置き換えることです。
DOMは、テンプレート（HTMLファイルに直接記述されたテンプレート）を使用する場合は、ブラウザがすべて小文字に強制属性名になるので、あなたはまた、キー名を名前に大文字を使用しないようする必要があります。
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
略語
v-プレフィックステンプレートのVueの特定の属性を識別するための視覚的な手がかりとして。あなたはVue.jsを使用する場合、ラベル既存の動的挙動（動的挙動）を追加v-接頭辞が参考にいくつかの命令が頻繁に使用されるため、しかし、それは使用に面倒を感じるだろう。一方、Vueの建設に全てのテンプレート管理する単一ページのアプリケーション（SPA -単一ページのアプリケーション）を、v-接頭辞はそれほど重要になってきています。
このように、Vueのためv-bindとv-on二つの最も頻繁に使用される命令は、特定の略語が使用されて提供されます。
V-バインド略語
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
V-の略語
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>