次はテンプレート構文だ。
テンプレートってあれね。各コンポーネントの template プロパティや、.vueの template タグで書いてた下のようなあれ。
<div> {{ message }} <ol><li v-for:"x in hogeeee">{{ x.text }}</li></ol></div>
んで、これは別にテンプレートじゃなくて自分で JavaScript でこねくり回すこともできるみたい。 こういうのをコードでこねくり回すのはつらいのは世の常なので、ドキュメントのインデックスの下の方に JSX についての項目があるのは、そういうことなんだろうなぁと思った。
テンプレートのポイント
テキストを出力するための {{ xxx }}だけど自動で変更を検知して見た目を更新してくれる。
v-onceディレクティブを指定すると、変更を監視しなくなるらしい。たくさんの変更されないデータがあるときは、これを指定しておくと捗りそう。SIer では必須っぽいなってなんとなく思った。
（偏見だけど、すごいたくさんの項目を出しまくる画面とかがありそうって思ってる）
v-htmlディレクティブはエスケープされない状態で出力できるのでマークダウンエディターのプレビュー画面みたいなのを作るときに重宝する。デフォルトでエスケープしてくれるのはいいね。
タグの属性に Vue のプロパティの値を流し込みたいときは v-bindディレクティブを使う。
例えばこんな Vue クラスのインスタンスで
import Vue from'vue'const app =new Vue({ el: '#app', data: { tooltip: 'ぽっぷあっぷ！', text: 'ぽっぷあっぷあるよ！',},});
こんなテンプレートだと
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%= BASE_URL %>favicon.ico"><title>ts-lab</title></head><body><noscript><strong>We're sorry but ts-lab doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><divid="app" v-bind:title="tooltip">{{ text }}</div><!-- built files will be auto injected --></body></html>
こうなる
そして、v-bindや {{ ... }}の中には単一の式も書ける。便利。
v-if, v-for, v-bind, v-onあたりが登場してた。
特に気になったのが v-on:submit.preventみたいに修飾子という機能を使うことで、event.preventDefault()をしてくれたりとかがあること。これは知らないと謎だったわ。
そのほかに v-bindが ;で省略できたり v-onが @になったりとか省略形がある。確かにめんどいよね v-xxxってうつの。
:title="xxx" -> v-bind:title="xxx" @click="onHoge" -> v-on:click="onHoge"
まとめ
本文と関係ないけど、ここらへんの変更があるということは目を通しておきながら 2.x 勉強したほうがいいかも。