// Fruit.vue 즉 하나의 component. 이 파일은 components 폴더에 있다.
<template>
  <li>{{ name }}?!</li>
</template>

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

// <style scoped lang="scss"> scoped 는 현재의 컴포넌트 안에서만 유효하다.
// 다른 component 에 영향을 미치지 않는다.
<style scoped lang="scss">
h1 {
  color:red !important;
}
</style>

// App.vue
// v- 은 Directive 라고 한다.
// 데이터를 반복 할 때는 각각의 데이터가 고유한지를 증명하기 위한 key 사용
<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
  },
  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>