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 などもディレクティブを使って処理を記述するみたいです。
次回はそのあたりを学んでいきたいと思います。

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

このエントリーをはてなブックマークに追加

takahiro

ロマンチック妄想SE

岩手生まれ、埼玉育ち。2人兄弟の長男。ゲームを作りたいと情報系の大学に進学したが、ゲームをやらなくなり。。紆余曲折あってWeb制作会社に就職。プログラマーを経てシステムエンジニアに。現在はシステム案件のディレクションがメイン。プライベートでは勉強含めコーディングはしている。ビールが好き♡

takahiroが書いたオススメ記事

ためスタ

wordpressで管理しているサイトをhttps化するには?

2018.1.3
ツール・アプリ

iPhoneでもコーディングしたい!

2017.8.14
ためスタ

Google HomeからLINEは送れるの?

2018.1.6