vue.jsを学ぶ (1. Hello World! 編の補足）

Hello World! 簡単でしたね

前回の記事、「vue.jsを学ぶ (Hello World! 編）」では、vue.jsを使ってHello World! をやってみました。記述する量も少ないし、簡単でしたね。

ムスターシュ構文

前回の記事でHello World! をやる際、HTML側では下記のように記述しました。

HTML

<div id="app">
  <h1>{{ text }}</h1>
</div>

プロパティ名（=text）を表示部分で2重中括弧で囲む（={{ }}）ことで、Hello World! を表示しました。これをムスターシュ構文と呼びます。
この他に、もうひとつ記述の仕方があります。

ディレクティブ（v-●●）

ムスターシュ構文とは別に、ディレクティブと呼ばれる記法を使うことで、同じくHello World! を実現できます。ディレクティブは「v-●●」というように記述することになっていて、HTMLタグの属性として記述します。
下記のようにすると、上記と同様にHello World! が表示されます。

HTML

<div id="app">
  <h1 v-text="text"></h1>   <!-- {{ text }} の代わりに v-text="text" をHTMLタグに属性として設定 -->
</div>

さて、どうでしょうか？
デモ画面へ

ディレクティブをたくさん使うようです

vue.jsではif やfor などもディレクティブを使って処理を記述するみたいです。
次回はそのあたりを学んでいきたいと思います。

これで、ちょっと成長しましたね。
無理せずちょいちょい頑張りましょう！