Vue3 정복기(3일차)

vue3 문법공부

<template>

</template>

<script>
export default {

}
</script>

<script>

</script>

App.vue 시작한다.

module의 빨간줄은 아직도 모르겠어서 ParkYoungWoong/vue3-webpack-template#eslint의 템플릿으로 진행한다.

만약

imported as '_createElementBlock'

이와같은 오류가 뜬다면

npm i vue@next 

를 통하여 최신버전의 vue를 설치하길 바란다

vue의 반응성

increase의 함수를 통하여 + 1씩 증가하게 만들었다.
그리고 h1에 @click에 증가 함수를 넣어서 클릭할때마다 1씩 증가하도록 로직을 작성

<template>
  <h1 @click="increase">
    {{ count }}
  </h1> 
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style>
  h1 {
    font-size: 50px;
    color: royalblue;
  }
</style>

오늘은 여기까지~

2022년 4월 5일

조건문 반복문

v-if

• Count가 4보다 크면 텍스트가 호출되도록 설정했다.

v-for

• data() 안에 fruits의 배열데이터를 생성하여 li 데이터안에 사용될수 있도록 제작했다.
• Fruit in fruits 사용하여 변수를 받도록 제작했고 key통하여 고유성을 나타냈다.
• import로 fruit.vue파일 을 받고 components로 등록한다(객체 리터럴방식)
• 변수는 아무거나 사용가능하고 그 변수는 li의 이름으로 받을 수 있다.
• key밑에 다가 name으로 fruit데이터를 명시한다.

<template>
  <h1 @click="increase">
    {{ count }}
  </h1> 
  <div v-if="count > 4">
    4보다 큽니다!!
  </div>
  <ul>
    <!-- fruit 는 변수 fruits는 배열 key는 고유성증명 -->
    <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: 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 (component)

props는 객체데이터고 name으로 받을것이며
type은 String으로 저장했다.
하지만 아무런 데이터가 없다면 default 값이 반환되게 제작한다.

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

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


<style  scoped lang="scss">
// scoped는 현재 컴포넌트만 유효하다
  h1 {
    color: red !important;
  }
</style>

이제 내일은 문법공부다.