【Vue.js】テンプレート構文

はじめに

Vue.jsを使うときにテンプレート構文について、

簡単にまとめられていた方が使いやすいと思ったので自分用にまとめておきます。

テンプレート一覧

テキスト

・テキスト(プレーンテキスト)

対応するオブジェクトのmsgプロパティの値にリアクティブに置き換えられる

code:index.html

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

・テキスト(プレーンテキスト) ※最初の展開のみに制限することも可能

code:index.html

<span v-once>This will never change:{{ msg }}</span>

※同じノードの他のバインディングにも影響がある場合もあるため使う時には注意して使う

・テキスト(HTML構文)

HTMLとして出力するにはv-htmlディレクティブを使用する

code:index.html

<p>Useing v-html directive:<span v-html="rowHtml"></span></p>

※任意のHTMLを描画することは危険なので使い所は考える

属性バインディング

丸括弧「{}」では、HTMLの属性の内部で使用することはできない

・属性のバインディング

code:index.html

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

※以下のような属性が単に存在していることで意味がある真偽値属性の場合は異なる動きをするため使用時に確認する

code:index.html

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

JavaScript式の使用

code:index.html

{{ number + 1 }}

{{ ok ? 'YES' : 'No' }}

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

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

※単一の式のみのサポートのため、以下のような構文は動作しないため注意

code:index.html

{{ var a = 1 }}

{{ if(ok) { return message } }}

ディレクティブ

ディレクティブ属性値は単一のJavaScript式だけが使える(v-forは例外)

内容としては、属性値の式が変化した時に、リアクティブにDOMに変化を起こすようになっている

・ディレクティブの例

code:index:html

<p v-if="seen">Now you see me</p>

引数

例として、v-bindディレクティブは、リアクティブにHTML属性を更新する

v-onではDOMイベントを受け取っている

code:index.html

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

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

動的引数

JavaScript式もディレクティブの引数に使うことができる

code:index.html

・動的引数の制約

code:index.html

装飾子

ディレクティブが特別な方法として、イベントトリガーが呼ばれた時に一緒に呼ぶ等の処理を仕込める

code:index.html

<form v-on:submit.prevent="onSubmit">Form1</form>

省略記法

v-bind省略記法

v-bindを使用する場合に以下のように省略が可能

code:index.html

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

<a :href="url">Link7</a>

<!-- 動的引数でも省略可能 -->

v-on省略記法

v-onでも可能

code:index.html

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

<a @click="doSomething">Link10</a>

<!-- 動的引数でも省略可能 -->

Vueをサポートしているブラウザでは正しくパースされ使うことができる。

まとめ

以上がVueを使うときのテンプレート構文となります。

省略記法は慣れるまでは大変かとは思いますが、慣れると非常に便利そうなので頑張って覚えて使っていきたいと思ってます。

参考：Vue.js公式ドキュメント