この記事はUdemyの講座「Vue JS入門決定版!jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。
今回は、dataオプションにオブジェクトや配列要素を設定して、データを出力させてみます。今までの学習内容はこちらにまとまっていますので、時系列順で読んでいただくとわかりやすいかもしれません。

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
dataオプション
オブジェクトや配列要素を設定する
データオプションには,
で区切って複数のデータを設定することができる。
// data: 内だけを掲載しています
message: 'Hello Vue.js!', // ←こんな感じ
count: 0
オブジェクトを設定することもできます。
message: 'Hello Vue.js!',
count: 0,
user: { //オブジェクト
lastName: 'Yamada',
firstName: 'Taro',
prefecture: 'Tokyo'
}
配列も設定することができます。
message: 'Hello Vue.js!',
count: 0,
user: { //オブジェクト
lastName: 'Yamada',
firstName: 'Taro',
prefecture: 'Tokyo'
},
colors: ['red', 'Green', 'blue'] //配列
これらを表示させてみる
表示部分はこんな感じで書くと出力されます。
<p>
{{ count }} <!-- 変数 -->
</p>
<p>
{{ user.prefecture }} <!-- オブジェクト -->
</p>
<p>
{{ colors[1] }} <!-- 配列 -->
</p>

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
まとめ
今回の部分はJavaScriptをかじったことがある方であれば、それほど理解が難しい部分ではありませんでしたね。次回からも頑張っていきましょう!