[Vue.js] 기초 - 리스트 렌더링 / 반복문 / v-for / :key

Latest update : 2021.04.20 - 수정 완료

 

---

Vue.js

vue 3 버젼 기준

---

<Vue.js 설치>

• Node.js 설치 (nodejs.org/ko/download/)
• 작업할 폴더에서 npm install -g @vue/cli (or) yarn global add @vue/cli
• (vscode 기준) 에디터 확장 기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
• npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)
• vue create 프로젝트명 -> Default (Vue 3 Preview).. 선택 후 엔터

 

npm install -g @vue/cli

(or)

yarn global add @vue/cli

(and)

// (vscode 기준) 에디터 확장기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
// npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)

vue create 프로젝트명

(and)

Default (Vue 3 Preview).. 선택 후 엔터

설치 완료 후 App.vue에서 작업 진행합니다.

 

---

<Vue.js 문법>

v-for 디렉티브

 v-for 예시 (Array)

<template>

  <div class="sampleList">
    // ex1 : 변수 1개, a는 데이터 하나하나를 의미합니다.
    <a v-for="item in sampleList" :key="item"> {{ item }} </a>

    // ex2 : 변수 2개, i는 0부터 시작되는 값입니다.
    <a v-for="(item, i) in sampleList" :key="i"> {{ item }} </a>
  </div>
  
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      sampleList : ['one', 'two', 'three'],
    }
  },
  components: {
  }
}

</script>

:key 값은 고유한 id 같은 값으로 적용시키는 게 좋습니다. (sort 등을 실행했을 경우 데이터가 꼬이는 상황이 발생할 수 있습니다.)

 

 

v-for 예시 (Object)

<template>

  <div class="sampleList">
    <ul>
      // ex1 : 변수 1개, a는 데이터 하나하나를 의미합니다.
      <li v-for="item in sampleList" :key="item.id">
      	{{ item.name }}는 {{ item.age }} 살입니다.
      </li>
    </ul>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      sampleList : [
      	{id: 0, name: 'Lee', age: 32},
        // name 등이 중복없는 고유한 값이면 :key에 바인딩 해도 됩니다.
        {id: 1, name: 'Lee', age: 20},
        {id: 2, name: 'Kim', age: 20},
        {id: 3, name: 'Cho', age: 2},
      ],
    }
  },
  components: {
  }
}

</script>

 

공식 문서 : kr.vuejs.org/v2/guide/list.html

리스트 렌더링 — Vue.js