Ep10# - mini project Vue.js (ok)

Part 1

C:\Users\Administrator\OneDrive\Desktop\vuejs2\src\components\HelloWorld.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
          <list-item :list="items"></list-item>
      </div>
    </div>
  </div>
</template>./ListItem.vue./ListItem.vue
<script>
import ListItem from "./ListItem.vue";
export default {
  name: 'HelloWorld',
  data: function() {
    return {
      items: [
        "Lorem ipsum dolor sit amet 1",
        "Lorem ipsum dolor sit amet 2",
        "Lorem ipsum dolor sit amet 3",
        "Lorem ipsum dolor sit amet 4",
        "Lorem ipsum dolor sit amet 5",
        "Lorem ipsum dolor sit amet 6"
      ]
    }
  },
  components: {
    ListItem
  }
}
</script>

C:\Users\Administrator\OneDrive\Desktop\vuejs2\src\components\ListItem.vue

<template>
  <div class="listitem">
    <item v-for="(item, index) in list" :item="item" :key="index">
      <slot></slot>
    </item>
  </div>
</template>
<script>
import Item from './Item.vue';
export default {
  name: 'ListItem',
  props: {
    list: Array
  },
  components: {
    Item
  }
}
</script>

C:\Users\Administrator\OneDrive\Desktop\vuejs2\src\components\Item.vue

<template>
  <div class="item">
    <p>{{item}}</p>
  </div>
</template>
<script>
export default {
  name: 'Item',
  props: {
    item: String
  }
}
</script>