Vue.jsのテンプレート構文について その1
テンプレート構文とは?
テンプレート構文とは、Vue.jsにおいてHTMLを描画するテンプレートを書くための構文。以下のような部分のこと。
<div id="app"> <p>{{ message }}</p> </div>
あくまでもこれはVue.jsのテンプレート構文を用いたテンプレートを記述しているのであって、HTMLを記述しているわけではない。
テンプレートを最終的にVue.js側がHTMLを出力し、ブラウザがレンダリングしている。
データを描画する
テンプレートを使用するためには以下のようにnew Vue
を用意する必要がある。
new Vue({ el: '#app', data: { message: 'Hello World!' } })
el
プロパティでVue.jsで扱う部分を指定する。
data
プロパティでデータを設定する。
データを描画するには二重中括弧を使用する。
<div id="app"> <p>{{ message }}</p> </div>
出力結果:
Hello World!
二重中括弧内にはjavascriptの構文をそのまま記述できる
例:
new Vue({ el: '#app', data: { number: 5 } })
<div id="app"> <P>{{ number + 2 }}</p> </div>
出力結果:
7
参考演算子も使用できる
例:
new Vue({ el: '#app', data: { ok: true } })
<div id="app"> <P>{{ ok ? '◎' : '×'}}</p> </div>
出力結果:
◎
ok: true
をfalse
に変えると×が表示される。
メソッド
例:
new Vue({ el: "#app", data: { message: "Hello World!", }, methods: { goodMorning() { return 'Good Morning'; } } })
<div id="app"> <p>{{ message }}</p> <p> {{ goodMorning() }} </p> </div>
出力結果:
Hello World! Good Morning
※メソッドの場合は()
が必要。
※メソッドの場合は二重中括弧の中に単一の式のみ書ける。(var
などは使用できない。)
methodからdataにアクセスする
以下のようにmessage
だけでは動かない。
new Vue({ el: "#app", data: { message: "Hello World!", }, methods: { goodMorning() { return message; } } })
this
をつけることによってアクセスできるようになる。
new Vue({ el: "#app", data: { message: "Hello World!", }, methods: { goodMorning() { return this.message; } } })
出力結果:
Hello World!
テンプレート内ではthis
は不要。
インスタンス内で自身のインスタンスにアクセスする場合には必ずthis
をつける。
コードまとめ
※cssを別に当てています。全てのコードはEdit in JSFiddle
より確認できます。
その2はこちら