この記事では、Vue.jsで、dataオプションにオブジェクトや配列要素を設定して、テンプレートから使う方法について説明いたします。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。
完成形
完成形の動作としては下記になります。
Vueインスタンス側のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!', count: 1, // Object user: { lastName: 'Yamada', firstName: 'Taro', prefecture: 'Tokyo' }, // Array colors: ['Red', 'Green', 'Blue'], } }) |
まず、Vueインスタンスから見ていきましょう。
以前のレクチャーで、dataオプションに、messageプロパティを定義して、値を設定する方法について学習しました。
データオプションには、カンマ区切りで複数のプロパティを定義するとができます。
数字も使えます。できます。
count : 0
Objectを設定することができます。
ユーザーを管理するObjectを作ります。
オブジェクト名はuserで、
名字、名前、居住地の都道府県をプロパティにもつとします。
lastName Yamada, FirstName Taro, プリフィクスチャー Tokyo
とします。
次に、配列を作成します。
配列名はcolorsで、値にRed, Green, Blueを設定してみます。
配列は [ (ブラケット、日本語でいうと、各カッコ で囲むことで表現できます。
テンプレート側のコード
次に、テンプレート側から、データオプションの各値を使用して、画面に描画してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="app"> {{ message }} {{ count}} {{ users.prefecture }} {{ colors[1] }} </div> |
まずは、文字列、数も同様です。
次に、オブジェクト、プリフィクスチャーの値を表示してみましょう。
オブジェクト名、userのあとに、ドットとして、prefectureとします。
これで、Tokyoと表示できました。
次に、配列、この、Greenを表示してみましょう。
colos ブランケットで囲って、配列のindexを指定します。
Redが0で、Greeが1、Blueが2なので、1を指定します。
Greenと表示されました。
動画で学習する
おわりに
この記事では、dataオプションにオブジェクトや配列要素を設定して、
テンプレートから使う方法について学習しました。
オンライン動画を使って学習する
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。
今すぐ詳細を確認する
