数値、文字列などの値やオブジェクトなどのデータを格納するdata [Vue.js]

Vue.js The Progressive JavaScript Framework

本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。

dataプロパティオプション

Vueのインスタンスを作成する際には、オプションオブジェクトを渡します。

オプションオブジェクトにdataプロパティを定義することで、アプリケーションの様々な状態を管理・操作することができます。

Vueでは、このdataオプションに値やオブジェクトを定義してアプリケーションを構成していくのが基本です。
dataオプションに定義したデータを更新したり、加工したりすることで、様々動作をアプリケーションに与えることができます。
Vueで作成するアプリケーションでは、このdataオプションが必須になります。

dataオプションのプロパティをテンプレートから参照することで、UI(ユーザーインターフェース)でのデータ表示を行うことができます。
※ UI: HTMLで構成したUIの要素

dataオプションに設定した値(やオブジェクト)は、Vue.jsのリアクティブシステム上で管理されるようになります。dataオプションの値やオブジェクトが更新されると、Vue.jsがそれを自動で検知します。
リアクティブシステムによりVue.jsがdataオプションの値を自動で検知してくれるので、dataオプションの値を更新するとUIでの表示も更新されます。

dataオプションの書式

dataオプションには数値や文字列などの値、オブジェクト、関数などを指定することができます。

dataオプションは、次の書式で定義します。

dataには複数の値を指定することができます。

dataオプションのデータを定義する

ここでは、dataオプションにデータを定義する例をいくつか紹介しておきます。

文字列、数値を定義する

dataオプションに文字列と数値を定義します。
以下のサンプルコードでは、数値のcustomerIdと文字列のcustomerNameを定義しています。

オブジェクトを定義する

dataオプションにオブジェクトを定義します。
ここでは、文字列値のnameプロパティと数値のpriceプロパティを持つproductというオブジェクトを定義しています。

配列を定義する

dataオプションに配列を定義します。
ここでは、上記で定義したproductオブジェクトの配列を定義します。

または

データを表示するHTMLテンプレート

「dataオプションのデータを定義する」で定義したdataオプションの値を確認できるように、jsFiddleに貼り付ければすぐに確認できるHTMLテンプレートを掲載しておきます。

文字列、数値を表示するサンプル

「文字列、数値を定義する」で作成したdataを表示するHTMLテンプレートになります。

オブジェクトを表示するサンプル

「オブジェクトを定義する」で作成したdataを表示するHTMLテンプレートになります。

配列を表示するサンプル

「配列を定義する」で作成したdataを表示するHTMLテンプレートになります。

Vue.js 入門 Tips 一覧