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>

오늘은 여기까지~