Vue 기초 예제 - Directive(조건/반복)

Vue Directive에 대한 간단한 설명과 Vue 기본 구조 파악 및 기초 예제

*자세한 설명 생략

 

 

▷ Vue Directive 란?

*Vue에서 기본으로 제공되는 Directive List는 아래 링크 참고

 

    - HTML 태그 안에 v- 접두사를 가지는 모든 속성

    - 내부적으로 주어진 데이터에 따라 DOM을 조작하는 역할

    - Custom 가능

      *Custom Directive

 

  

▷ 기초 예제 - 조건( v-if )/반복 (v-for)

*프로젝트 구조 및 CSS 생략

*파일 경로 필요시 App.vue 경로 참고

 

Vue에서는 Component Name을 두 개 이상의 단어로 조합하여 만드는 것을 추천

*하나의 단어로 사용 시 에러

 

export default name 예시(.vue naming까지 에러가 발생)

 

 - IfTestCmp.vue

<template>
    <hr>
    <h2>[ If Test ]</h2>
    <h3>리스트</h3>
    <div>{{ list }}</div>
    <h3>리스트 값</h3>
    <div v-for="(obj, i) in list" :key="obj">
        <div v-if="obj.id == '001'">
            {{ i }} → {{ obj }}
        </div>
        <div v-else>
            {{ i }} → None
        </div>
    </div>
    <hr>
</template>
  
<script>
export default {
    data: () => {
        return {
            list:
                [
                    { id: '001', message: 'Hello If' },
                    { id: '002', message: 'Hello Test' },
                    { id: '003', message: 'Hello World' }
                ]
        }
    }
}
</script>

 

- ForTestCmp.vue

<template>
    <hr>
    <h2>[ For Test ]</h2>
    <h3>리스트</h3>
    <div>{{ list }}</div>
    <h3>리스트 값</h3>
    <div v-for="(obj, i) in list" :key="obj">
        {{ i }} → {{ obj }}
    </div>
    <hr>
</template>
  
<script>
export default {
    data: () => {
        return {
            list:
                [
                    { id: '001', message: 'Hello For' },
                    { id: '002', message: 'Hello Test' },
                    { id: '003', message: 'Hello World' }
                ]
        }
    }
}
</script>

 

- HeaderCmp.vue

*@ : 절대경로 root(src) path

<style>
@import url('@/assets/css/main.css');
</style>

<template>
    <div>
        <img alt="Vue logo" src="@/assets/img/logo.png">
        <h6>Root Component</h6>
        <h1>Start Vue</h1>
    </div>
</template>

 

- App.vue

<template>
  <div id="HeaderCmp"><HeaderCmp /></div>
  <div id="TestDiv">
    <p id="IfTestCmp"><IfTestCmp /></p>
    <p id="ForTestCmp"><ForTestCmp /></p>
  </div>
</template>

<script>
import HeaderCmp from '@/components/HeaderCmp.vue'
import IfTestCmp from '@/components/Test/IfTestCmp.vue'
import ForTestCmp from '@/components/Test/ForTestCmp.vue'

export default {
  components: {
    HeaderCmp,
    IfTestCmp,
    ForTestCmp
  }
}
</script>

 

 

▷ 결과 확인

*http://localhost:8080

 

 

▷ 참고

API Reference | Vue.js

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리