カテゴリ: notes
タグ: vuejs

テンプレート構文|Vue.js再学習

触れないタイミングが3ヶ月あったり忘れてしまった事に焦りを感じたので、今度は勉強したことをブロクに残していきたいと思います。 内容的には公式ドキュメントの写経のようなものになります。

今日はテンプレート構文を見ていきます。

テンプレート構文

テンプレート構文

冒頭

Vue.jsはHTMLベースのテンプレート構文を使っています。 つまり全てのVue.jsテンプレートは、ブラウザやHTMLパーサによってパースできるValidなHTMLのようです。

以上の理由でVueインスタンスのデータと描画されたDOMを宣言的に対応させることができるようです。

宣言的:ここでは具体的な手順、つまり実装の細部やアルゴリズムを隠すという意味で捉えるのが良さそうです

素のJSを使った場合、HTMLとJSを対応させるためにはその処理を書く必要があります。 Vue.jsではValidなHTMLを使っているので、Vue.jsとの対応はVue.jsフレームワークが解釈するValidなHTMLで紐付けするようになっているよという事ですね。

Vue.jsが解釈するHTMLを書くとデータの対応は、Vue.jsが内部で色々やってくれるよという事ですね。

展開

テキスト

データバインディングのもっとも基本的な形は、”Mustache”タグ(二重中括弧)を利用したテキスト展開です。

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

mustacheタグは、対応するオブジェクトのmsgプロパティの値に置き換えられます。

また、msgプロパティが変更されるとき、それに応じて更新されます。

v-onceディレクティブを使用すると、データ変更時の更新を行わず、一度だけデータを展開することができます。 ただし、同じノードの全てのバインディングがv-onceの影響を受けるようです。

生のHTML

Mustacheタグは、プレーンなテキストとして展開されます。 HTMLとして出力したい場合は、v-htmlディレクティブを使います。

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

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

spanの「コンテンツ」はrawHtmlプロパティの値に書き換えられ、プレーンなHTMLとして解釈されます。

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>

isButtonDisablednullundefined、またはfalseの値を持つ場合、<button>要素にdisabled属性は描画された含められません。

JavaScript式の使用

ここまで、テンプレートに単純なキーをバインディングしてきました。実際にはVue.jsは全てのデータバインディング内部でJavaScript式を完全にサポートします。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="'list-' + id"></div>

これらの式は、Vueインスタンスが所有するデータスコープ内でJavaScriptとして評価されます。制限として、それぞれのバインディングは、*単一の式*だけ含むことができるというものです。なので、以下は動作しません。

<!-- これは文であり、式ではありません -->
{{ var a = 1 }}

<!-- フロー制御もいずれも動作しません。三項演算子を使用してください -->
{{ if (ok) { return message } }}

テンプレート式はサンドボックスで、MathDateといったホワイトリストにあるグローバルオブジェクトだけアクセスできます。テンプレート式内でユーザが定義したグローバルオブジェクトにアクセスしようとしてはいけません。

ディレクティブ

ディレクティブはv-から始まる特別な属性です。ディレクティブ属性値は、*単一のJavaScript式*を期待します(ただし、v-forは例外です) ディレクティブのしごとは、属性値の式が変化したときに、リアクティブに副作用をDOMに適用することです。

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

v-ifディレクティブはseen式の値が真か否かに基づいて、<p>要素を削除/挿入します。

引数

ディレクティブの中には「引数」を取るものもあります。これはディレクティブ名の後ろにコロンで表記します。 例えば、v-bindディレクティブは、HTML属性をリアクティブに更新します。

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

ここでの引数は受け取りたいイベント名です。 ここからイベントハンドリングの詳細について説明します。

修飾子

修飾子(Modifier)は、ドットで表記された特別な接尾語で、ディレクティブが特別な方法で束縛されるべきということを示します。 例えば、.prevent修飾子はv-onディレクティブに、イベントがトリガされた際event.preventDefault()を呼ぶように伝えます

<form @subimt.prevent="onSubmit">…</form>

これらの機能を調べるとき、この後、v-onv-modelについては、修飾子の他の例を見るでしょう。

省略記法

v-bindv-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.jsがサポートしているブラウザで、正しくパースされます。また、最終的に描画されるマークアップには現れません。

About

はらぺこ

職業:フロントエンドエンジニア
趣味:自転車/テニス/空手
愛車:
 ✓ブリヂストン オルディナs5
 ✓アンカー RS8 EL

神戸にて爆誕。
友人から「お前がマスターして教えてくれ」と渡された『HTML&スタイルシート ポケットリファレンス』がキッカケでWeb業界への一歩を踏み出す事になる。

2013年7月にクロスバイクを購入して自転車にドハマリする。
全力で遊ぶ合間に、ほどほどに頑張る日々を過ごしています。

飼い主 はっぴー

2014年10月20日(誕生日)の引っ越し日、捨て猫になっていた所、運命の出会いを果たす。 
(その日は雨で、3日間雨が続く寒い日だった。このまま放っておけないと自転車生活と秤にかけて、はっぴーを選択する)
5時間かけて油断させ、近づいてきた所をガッと拾い上げ、そのまま家へ猛ダッシュ、玄関の鍵を閉めて家族になる。以後オレたちはファミリーだ。

助けたつもりが、実際は自分の方が精神的に救われている。はっぴーなしでは生きていけない。(最早「飼い主」と言って差し支えないだろう)

「はっぴー」という名前の由来は、『幸せになってほしい』という想いで名付けた。