1. 조건문과 반복문

01. App.vue에서 간단하게 구현!

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <!-- v- : 디렉티브(Directive) -->
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <!-- v- : 디렉티브(Directive) -->
    <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">
    h1 {
        font-size: 50px;
        color : royalblue;
    }
    ul {
        li {
            font-size: 40px;
        }
    }
</style>

02. component로 나눠보기!

• App.vue

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

<script>
import Fruit from '~/components/Fruit';

export default {
    components : {
        // 속성의 이름과 데이터의 이름이 같으면 ': Fruit'를 생략 가능
        Fruit
    },
    data() {
        return {
            count : 0,
            fruits : ['Apple', 'Banana', 'Cherry']
        }
    },
    methods : {
        increase () {
            this.count += 1;
        }
    }
}
</script>

<style lang="scss">
    h1 {
        font-size: 50px;
        color : royalblue;
    }
    ul {
        li {
            font-size: 40px;
        }
    }
</style>

• Fruit.vue

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

<script>
export default {
  props : {
    name : {
      type : String,
      default : ''
    }
  }
}
</script>

// scoped : 해당 스타일은 다른 콤포넌트에 영향을 주지 않고 유효범위를 지정한다
<style scoped lang="scss">
  h1 {
    color : red;
  }
</style>