【Vue.js入門】画像を表示する

• まずは、Vue.jsのライブラリをCDNでインストールする

• v-bindを使って画像を表示する

v-bind：データでHTMLの要素の属性を指定できる

<img v-bind:src="プロパティ名"></img>

v-bindを使ってimg要素のsrcを指定する

imageNameには後で表示する画像名を入れる

• Vueインスタンス

VueインスタンスのdataにimageNameを用意する

imageNameに画像のファイル名を入れる (「fish_fugu_haku.png」)

• 実行結果

＜参考文献＞

• 画像：水を吐くフグのイラスト

かわいいフリー素材集 いらすとや

• 森 巧尚 [著]　 動かして学ぶ！ Vue.js開発入門　株式会社翔泳社