コンポーネント、v-for、v-bind

コンポーネント

v-for

v-bind

について書いていきます。

https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-3

コンポーネント

my-componentについて考えていきましょう。

HTML

my-componentです。

<div id="app">
 <my-component v-for="(item, index) in myArray" v-bind:my-name="item" >   
 </my-component>
</div>

JS

MyComponentが定義されています。

  var MyComponent = {
    template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
    props: {
      myName: String
    }
  }
    
  Vue.createApp({
   data() {
     return {
      myArray:['1つ目','2つ目','3つ目','4つ目']
     }
   },
  components: {
    'my-component': MyComponent
   }
  }).mount("#app");

画面

JSで定義されたtemplateが繰り返して表示されていることが確認できました。

v-for

繰り返しのv-forです。

      <div id="app">
        <my-component v-for="(item, index) in myArray" v-bind:my-name="item" >   
        </my-component>
      </div>

myArrayからitemとindexを一つずつ取り出していそうですね。

myArrayです。

  Vue.createApp({
    data() {
      return {
        myArray:['1つ目','2つ目','3つ目','4つ目']
      }
    },
    components: {
      'my-component': MyComponent
    }
  }).mount("#app");

v-bind

my-nameがitemとバインドされていますね。

      <div id="app">
        <my-component v-for="(item, index) in myArray" v-bind:my-name="item" >   
        </my-component>
      </div>

my-nameは、JSで言うところのMynameです。

  var MyComponent = {
    template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
    props: {
      myName: String
    }
  }

{{ myName }}にmyArrayからitemとして取り出された文字列が出力されるという具合です。