ミニマムなVue.jsコンポーネントプログラミングその４(静的なデータ取得)

その１：ミニマムなシングルコンポーネントVue
その２：ミニマムなルータ
その３：ミニマムなサブコンポーネント

今回は「ミニマムなデータ取得」です。

段階を踏んでやっていきたいと思います。

(1) 静的データの取得
　いわゆるVue.jsの十八番である、データバインディングを使います。
　Vue.jsのhello world的なプログラムで最初に紹介されますね。
　(なぜこの記事の場合、「その４」でようやくこれに言及することになったか、自分でも不明ですが)

(2) 動的データの取得
　サーバを立ててそこからResutFulなAPIによってデータを取得します。
　Scriptからは、axios(PromiseベースのHTTPクライアント)を使って、APIコールします。

今回は(1)です。

VTuber部品作成(src/compnents/VTuber2.vue)

まずは、静的に閉じた画面コンポーネントを作成します。

<template>
    <div>
        <ul>
            <li>名前:{{vname}}</li>
            <li>年齢:{{age}}</li>
            <li>身長:{{height}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Vtuber2',
    data() { 
        return {
            vname: '町田ちま',
            age: 16,
            height: 150
        }
    }
}
</script>

script内で実装するバインド変数は静的に初期化します。
ちなみに、コンポーネントとして生成するVueインスタンス内では、
dataメンバを関数実装しなければらないとあります。

JavaScriptの内部の動作に詳しくないのが歯がゆいですが、つまり、

コンポーネントは＜VTuber2/＞のようにHTMLに埋め込む。
つまりHTML要素として使えて、かつ、あちこちに複数埋め込むことが出来る。
とはいえ、それぞれ独立したインスタンスとして生成されない？
vname等の変数はグローバルスコープで共有される。
なので、関数化することで(Auto変数的な扱いになり)共有化を防ぐ。

ということでしょうか。めんどくさいな・・

(あー、コンポーネントをクラスインスタンスとして独立させられたらいいのになぁ)

VTuber部品をHome画面に埋め込み

<template>
  <div>
      <h1>VTuberプロフィール</h1>
      <VTuber2/>　　　　　　　　　　　＜＝＝ココ
  </div>
</template>

<script>
import VTuber2 from '../components/VTuber2.vue'

export default {
    name: 'Home',
    components: {
      VTuber2　　　　　　　　　　　　　＜＝＝ココ
    }
}
</script>

今回のサブコンポーネントはコンポーネント内に完全に閉じているので、テンプレートに埋め込みのもタグ要素だけです。

実行

npm runn serveして、locahost:8081でアクセスすると、以下のように表示されます。