【Vue.js入門】dataプロパティのチュートリアル

こんにちは、コンスキです。

前回は、VueコンストラクタからVueインスタンスを作成して、div要素に適用（マウント）させましたね。

これがVue.jsの始まりでした。そして、バインディングの例として、画面にdataプロパティの値を表示させるところまでを説明しました。

今回もdataプロパティに焦点を当てていきますが、より詳しく説明していきます。

dataプロパティとは
サンプルプログラムでdataプロパティを確認
dataプロパティの値を変更するとどうなる？
まとめ

dataプロパティとは

dataプロパティとは、画面に表示するデータを入れておくプロパティのことです。必ずしも画面に表示するデータだとは限りません。

ここでdataプロパティ自体の話からそれますが、これまでに何度も登場している「プロパティ」という言葉について復習します。（わかっている方はこちらまで飛ばしてください。）

プロパティとはオブジェクトの中にあるキーと値の組のことをいいます。

プロパティというと、これまでに「elプロパティ」や「dataプロパティ」が登場してきました。これらもプロパティの定義通りにオブジェクトの中にあるキーと値の組です。

それではこれらプロパティは何のオブジェクトに入っているのでしょうか？

これらのプロパティは「Vueインスタンス作成時のコンストラクタに渡す引数のオブジェクト」に入っています。

そしてdataプロパティは値にオブジェクトを持っていて、そのオブジェクトのプロパティとしてこれからデータを書いていくというイメージです。

サンプルプログラムでdataプロパティを確認

次にdataプロパティの説明のために、何人かの名前と身長、体重を使ったサンプルプログラムをつくっていきます。

前回は一つのデータを表示しましたが、今回は同時に複数のデータを画面に表示することに挑戦します。

プログラムの内容としてはとある３人の名前と身長、体重を画面に表示するプログラムです。

dataの値を画面に表示するために次の手順でやっていきます。

appというidをつけたdiv要素をつくる
Vueインスタンスのelプロパティに”#app”を設定し、Vueをdiv要素に適用する
Vueインスタンスのdataプロパティに画面上に表示させたい値を設定する
Vueを適用したdiv要素内に<p>{{ 表示させたい値のキー }}</p>を書く

４についてはpタグじゃなくても大丈夫です。

まずは手順１のとおりにdiv要素をつくりappというidをつけます。

<div id="app"><div>

次に手順２の通りにelプロパティに”#app”を設定します。

new Vue({
    el: "#app"
})

次に手順３で、dataプロパティに画面上に表示させたいデータを設定します。

画面に表示したいのは３人の名前と身長、体重なので、dataプロパティには３人の名前と身長、体重を設定します。

名前と身長、体重は３人全員が共通して持っているため、直接dataプロパティに書くのではなく、オブジェクトの配列を作って「people」という変数に代入しておき、それをdataに設定します。

オブジェクトの配列をつくる↓

var people = [
    {
        name: 太郎,
        height: 170,
        weight: 70
    },
    {
        name: 花子,
        height: 160,
        weight: 55
    },
    {
        name: 次郎,
        height: 162,
        weight: 60
    }
]

変数「people」をdataプロパティに設定する↓

const vm = new Vue({
    el: "#app",
    data: {
        person: people

})

「people」のキーは「person」にしておきます。↑

次に４つ目の手順です。div要素にはVueを適用してあったので、この中にdataプロパティに設定している値を指定するためのキーを書きます。

３人の名前と身長、体重をすべて表示するのは大変なので、まずは１人目の名前と２人目の身長、３人目の体重を表示してみます。

キーは「{{}}（マスタッシュタグ）」で囲むようにしてください。

<div id="app">
    <p>１人目の名前：{{ person[0].name }}</p>
    <p>２人目の身長：{{ person[1].height }}(cm)</p>
    <p>３人目の体重：{{ person[2].weight }}(kg)</p>
</div>

前回はdataに文字列を設定しましたが、今回、dataにあるのは「people」というオブジェクトの配列です。

<p>{{ person }}</p>書いてしまうと配列peopleを表示してしまうので気をつけましょう。

１～４の手順を終えたので、すべてをまとめたスクリプトを確認します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dataプロパティ</title>
  <script src="https://unpkg.com/vue></script>

</head>
<body>
    <div id="app">
        <p>１人目の名前：{{ person[0].name }}</p>
        <p>２人目の身長：{{ person[1].height }}(cm)</p>
        <p>３人目の体重：{{ person[2].weight }}(kg)</p>
    </div>
    <script>
        var people = [
            {
              name: "太郎",
              height: 170,
              weight: 70
            },
            {
              name: "花子",
              height: 160,
              weight: 55
            },
            {
        
              name: "次郎",
              height: 162,
              weight: 60
            }
        ]
        let vm = new Vue({
            el: "#app",
            data: {
                person: people 
            }
        })
    </script>
</body>
</html>

ブラウザで確認してみてください。

こんな感じに表示されるはずです↓