テキストや属性のバインド、繰り返しや条件分岐などのテンプレート構文について
Vue.jsを使ってみたら、初めてなのにパッと見でなんとなくやっていることが分かり不思議だったのですが、それもそのはずで、テキストや属性のバインド、繰り返しや条件分岐などのテンプレート構文がAngularJSと似ており、そのおかげで、AngularJSを使ったことがある人にとっては親しみやすいフレームワークになっています。
テンプレート構文まとめ
以下は公式サイト掲載のテンプレート構文を自分が確認しやすいようにまとめただけのものになります。
// テキスト
<span>{{ msg }}</span>
// テキスト（データ更新なし）
<span v-once>{{ msg }}</span>
// 素のHTML
<p>{{ rawHtml }}</p>
<p><span v-html="rawHtml"></span></p>
// 属性
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled"></button>
<a v-bind:href="url"></a>
// JavaScript式
{{ok ? \'YES\' : \'NO\'}}
<div v-bind:id="'list-' + id"></div>
// 条件
<h1 v-if="type == 'a'">A</h1>
<h1 v-else-if="type == 'b'">B</h1>
<h1 v-else>C</h1>
// 条件（cssのdisplay切替）
<h1 v-show="ok">Hello!</h1>
// 繰り返し
<div v-for="item in data">
<span>{{ item.title }}</span>
</div>
// イベント
<a v-on:click="doSomething"></a>
公式サイトの他のフレームワークとの比較で、AngularJSからインスピレーションを受けたからと書いてありますね。納得です。