Vue.jsのテンプレート文法詳細

Vue.jsテンプレート文法
Vue.jsはHTMLベースのモダリティ文法を使用しており、開発者が声明のようにDOMを下のVueインスタンスのデータに結びつけることができます。
Vue.jsの核心は簡潔なテンプレート文法を使用して、DOMにデータをレンダリングするシステムです。
応答システムと結合して、アプリケーション状態が変化すると、Vueは再レンダリングコンポーネントの最小価格をインテリジェントに計算し、DOM動作に適用することができる。
「Mustache」文法（つまり、二重括弧で包む）のテキスト補間を使用します。<span>Message: {{ msg }}</span>Mustacheタグは、対応するデータオブジェクト上の「msg」属性の値に置き換えられます。いつでも、バインディングされたデータオブジェクトのmsg属性が変更され、補間の内容が更新されます。
v-once命令を使用すれば、一括補間もできます。データが変更された場合、補間の内容は更新されません。ただし、これはノード上の他のデータバインディングに影響を与えることがあるので注意してください。
HTML
直接大きい括弧で包んでただ普通のテキストを使って、もしHTMLコードの効果を実現したいならば、v-html指令に参加しなければなりません。
html部分：

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

js部分：

var vm = new Vue({
	el:'#app',
	data:{
	 rawHtml:'<span style="color:red">this is red</span>'
	}
});

v-html使用時にspanタグの前のタブに「v-html="xxx」を書き込むと、dataの中の値をHTML形式でspanタグに入れるのに相当します。
 
atribute(属性)
Mustache文法はHTML atributeには機能しません。この場合はv-bindコマンドを使うべきです。
フォーマット:v-bind:属性=変数名
html部分：

<div v-bind:color="textcolor">123</div>

js部分：

data:{
 textcolor:"red"
}

変数textカラーの値「red」をボックスの「プロパティ」に結びつける

ブール属性に対して、v-bindは次のように使用されます。

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

isButtionDispableの値がnull、undefinedまたはfalseである場合、disabled atributeはレンダリングされた＜button＞要素に含まれない。
JS式
今まで、私達のテンプレートの中で、私達はずっと簡単な属性のキーだけを結び付けています。しかし、実際には、すべてのデーターバインディングに対して、Vue.jsは完全なJavaScript表現サポートを提供しています。

{{ data   + 1 }}    //
{{ data  /    ? 'true  ' : 'false  ' }}   //    
{{ data  .split('').reverse().join('') }}   //        

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

これらの表式は、属するVueの例のデータスコープでJavaScriptとして解析されます。
各バインディングは単一の表現しか含まれないので、以下の例は有効になりません。

<!--     ，      -->
{{ var a = 1 }}

<!--         ，         -->
{{ if (ok) { return message } }}

コマンド
コマンド(Directives)は、v-プレフィクスを含む特殊なアトリエです。命令atributeの値は、単一JavaScript表現であると予想されます。コマンドの役割は、表式の値が変わると、その結果生じる連帯効果をDOMに応答的に作用させることである。紹介で見た例を振り返ってみます。

<p v-if="seen">       </p>

ここで、v-ifコマンドは、式seenの値の真偽に基づいて

要素を挿入/除去する。
パラメータ
いくつかの命令は、コマンド名の後にコロンで表される「パラメータ」を受信することができます。例えば、v−bindコマンドは、応答的にHTML属性値を更新するために使用されてもよい。

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

ここでhrefはパラメータであり、v-bindコマンドがこの要素のhref atributeを表現urlの値と結びつけることを知らせる。
他の例は、DOMイベントを傍受するv−on命令である。

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

ここでのパラメータは傍受のイベント名です。
ダイナミックパラメータ
異なる属性を動的に結合することができます。コマンドのパラメータとして、四角括弧で囲まれたJavaScript表現が使用できます。

<!--
  ，              ，    “           ”    。
-->
<a v-bind:[attributeName]="url"> ... </a>

ここのatributeNameはJavaScript表現として動的に求められ、求められた値は最終的なパラメータとして使用されます。
例えば、あなたのVueの例にdata属性atributeNameがある場合、その値は「href」であると、このバインディングは<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>に相当する。
同様に、動的パラメータは動的イベント名バインディング処理関数として使用できます。

<a v-on:[eventName]="doSomething"> ... </a>

この例では、eventNameの値が「focus」である場合、v-on:[eventName]はv-on:focusに等しい。
修飾子
修飾子（modifier）は半角ピリオド「.」で指定された特殊なサフィックスであり、命令が特殊な方法で結合されるべきであることを指摘します。
略字v-bind略語

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

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

v-onの略語

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

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

締め括りをつける
以上は小编が皆さんに绍介したVue.jsのテンプレート文法です。