6. Vue - 기초문법

- 이전 포스팅에서 만든 프로젝트와 이어지는 내용입니다. 

 

1. 조건문 

• 이전 포스팅에서 숫자를 클릭하면 숫자가 증가하는 간단한 프로젝트를 만들었다.
• 이번에는 조건문을 이용하여 숫자의 크기를 담는 count 변수가 4보다 큰 경우 메세지를 출력해보도록 하자. 

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
</template>

• div 태그 내부에 v-if 라는 속성을 사용하여 조건문을 작성할 수 있다. 
• v-if의 속성 값에는 조건이 들어가는데, 조건문에서 사용하는 변수는 script 태그에 선언되어 있어야 한다. 

 

a) 출력 화면

 

b) 디렉티브(Directive)

• 이번 예제에서 사용해본 조건문과 동일하게 v-로 시작하는 속성을 디렉티브라고 한다. 

---

2. 반복문

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <li
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style lang="scss"> // scss를 사용하기 위한 설정
 h1 {
   font-size: 40px;
   color: darkorange;
 }

 ul {
   li { // scss의 중첩 기능을 사용
     font-size: 40px;
   }
 }
</style>

• script 태그에서 fruits 라는 배열 변수를 생성한다.
• ul태그 내부에 li태그를 생성한다. 
• li 태그에 v-for 속성을 이용하여 반복문을 형성한다. 

 

a) 출력화면

 

b) key란?

• 데이터를 반복할 때는 각 데이터가 고유함을 증명하기 위해 key라는 속성을 사용해야한다. 
• 예를 들어, A와 B라는 데이터가 가진 값은 동일할 지라도 A라는 데이터가 중복되어 연산되지 않도록 하기 위함이다.
• v-for를 이용할 때는 반드시 key를 필요로 하므로, 숙지하도록 하자. 

---

3. component를 import 하기

• components 폴더 안에 HelloWorld.vue 파일은 삭제한다. 
• 해당 경로에 Fruit.vue라는 새로운 파일을 생성하여 다음과 같이 작성한다. 

<template>
  <li>{{ name }}!!!</li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '' //props의 name 속성은 반드시 default값을 설정해야한다.
    }
  }
}
</script>

 

 

• Fruit.vue를 App.vue에서 사용할 수 있도록 다음과 같이 App.vue를 설정한다. 

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <Fruit
      v-for="fruit in fruits"
      :key="fruit"
      :name="fruit">
      {{ fruit }}
    </Fruit>
  </ul>
</template>

<script>
import Fruit from '~/components/Fruit'
export default {
  components: {
    Fruit: Fruit // import해온 Fruit를 Fruit라는 태그로 사용한다는 설정
    // 속성 이름과 속성 값이 동일하다면 콜론 뒤쪽을 생략할 수 있다. Fruit: Fruit --> Fruit
  },
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style lang="scss"> // scss를 사용하기 위한 설정
 h1 {
   font-size: 40px;
   color:darkorange;
 }

 ul {
   li { // scss의 중첩 기능을 사용
     font-size: 40px;
   }
 }
</style>

 

a) 출력화면

 

 

b) 어떻게 동작하는가? 

• App.vue의 script 부분에서 Fruit.vue를 Fruit라는 이름으로 import한다.
• import해온 Fruit를 태그로써 사용하기 위해 component 속성에 Fruit라는 이름으로 등록한다. 
• 이제부터 Fruit는 태그 이름으로 사용할 수 있게 되었다.
• Fruit 태그에는 Fruit.vue에 입력된 template 태그의 내용이 출력되게 된다. 

 

c) Fruit 태그의 name 속성은 무엇인가?

• Fruit.vue의 script부분에 보면 props 객체 내부에 name이라는 속성이 있다. 
• name 속성에 들어오는 값을 String 자료형만 받도록 선언했으며, deafult는 ''(공백)으로 설정했다. 
• Fruit 태그의 name 속성값은 바로 이 부분에 입력되게 될 값을 의미하는 것이다. 

 

d) 속성이름과 속성값이 동일하다면 생략할 수 있다. 

• 위의 사진처럼 속성과 속성값이 동일한 경우, 콜론부분을 포함한 뒤쪽부분을 다음과 같이 생략할 수 있다. 

---

4. SCSS 속성 - Scoped 

• Fruit.vue에는 h1 태그가 존재하지 않는다.
• 하지만, Fruit.vue에서 h1 태그의 CSS를 변경하면 h1을 갖고있는 다른 component에 영향을 미친다.
• 이를 방지하기 위해서 사용할 수 있는 scss의 속성이 scoped 이다.

 

a) scoped 속성을 사용하지 않은 경우

 

b) scoped 속성을 사용한 경우