[ VUE ] bookList 만들기 / v-for 리스트렌더링 예제

 

 

vue - src구조

 

---

 

게시판 리스트나 비슷한 내용을 반복적으로 보여줄 때

사용하는 디렉티브가 v-for 디렉티브!

 

 

  v-for로 엘리먼트에 배열 매핑하기 

v-for 디렉티브는 v-for="item in items" 형태로 사용

items는 원본 데이터 배열,

item은 반복되는 배열 엘리먼트의 별칭!

---

v-for 디렉티브의 index값을 구하고 싶을 땐

v-for="(item, index) in items" 형태로 사용,

index값은 {{ index }}로 사용가능

 

 

 

 

 

1. App.vue  ( 부모 컴포넌트 )

<template> <!-- HTML 구현 부분 -->
  <div id="app">
    <BookList v-bind:bookList="list"/><!-- 자식 사용 -->
  </div>
</template>

<script> /*  component calss 코드 구현 부분  */
import BookList from './components/BookList.vue' // 자식 import

export default { // 다른 곳에서 사용시 VUE파일 이름으로 import
  name: 'App',
  components: {
    BookList // 사용 컴포넌트 등록(자식)
  },
  data: ()=> {
    return {
      list: [ // 도서에 대한 정보 list로 담기
        {id:'p01', name:'위험한 식탁', price:2000, date:'20170401', img:'a'},
        {id:'p02',name:'공부의 비결',price:3000, date:'20170402',img:'b'},
        {id:'p03',name:'오메르타',   price:2500, date:'20170401',img:'c'},
        {id:'p04',name:'행복한 여행',price:4000, date:'20170401',img:'d'},
        {id:'p05',name:'해커스 토익',price:2000, date:'20170401',img:'e'},
        {id:'p06',name:'도로 안내서',price:2000, date:'20170401',img:'f'},
      ]
    }
  }
}
</script>

<style> /*  CSS 구현 부분  */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

---

components  /  BookList.js ( 자식 클래스 )

v-for를 사용시에는 v-bind:key ="유일값"을

반드시 지정하지 않으면 오류 발생!!!

 

 

<template><!-- 자식 HTML 구현 부분 -->
  <div class="book">
    <h1>도서목록 {{ bookList.length }}권</h1>
    <ul>
      <!-- v-bind: key ="유일값" 반드시 지정주의!!! -->
      <li v-for="book in bookList" v-bind:key="book.name"> 
        <!-- v-for를 통한 book정보 출력 -->
        <img v-bind:src="require(`@/assets/image/${book.img}.jpg`)">
        <b>{{ book.name }}</b>
      </li>
    </ul><!-- App.vue에서 Template에서 msg를 전달받아 바인딩함 -->
  </div>
</template>

<script>
export default {
  props: { // 부오에서 오는 데이터 받는 부분
    bookList: Array ,// bokkList타입은 Array 지정
  }
}
</script>

<style scoped> /* 자식 CSS 구현 부분 */
.book {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
li {
  margin: 0 10px;
}
b {
  display: block;
}

</style>

완성 하였으면 터미널에서

 yarn serve  하여 확인!

 

---

 

 

yarn serve로 출련된 결과화면

 

참고사이트

리스트 렌더링 — Vue.js