【Vue.js入門】03_様々なデータを扱う

Vue.js入門第３回。様々なデータを扱う方法をまとめます。

はじめに

Vue.jsではdataオブジェクトで画面の描画に必要なデータを管理します。
今回はdataオブジェクトに保存されている各種データを表示したいと思います。

ソースコード

解説

Javascriptでid属性のappの要素配下をVueインスタンスとして生成します。
生成したdataオブジェクトに基本的な文字列データ、数値データ、オブジェクト、配列を設定します。

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js',
        count: 0,
        user: {
            lastName: 'Yamada',
            firstName: 'Taro',
            prefecture: 'Tokyo'
        },
        colors: ['Red', 'Green', 'Blue']
    }
})

HTMLにマスタッシュ構文（{{ }}）でdataオブジェクトに設定したデータを表示させています。
inputタグなど値が属性の場合はv-bindディレクティブではめ込むことが出来ます。（ディレクティブはv-xxxの総称）
最後の行はVue.jsの読み込みです。

<div id="app">
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <p>{{ user.prefecture }}</p>p>
    <p>{{ colors[1] }}</p>
    <input type="text" v-bind:value="user.lastName + user.firstName">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>