Vue.js에서 간편한 좋아요 버튼

안녕하세요
Vue.js에 대해 여러가지 조사하면서 쓰고 있습니다.
비망록으로 간이적으로 컴포넌트에 관해서 여러가지 착각하고 있었으므로
다시 작성해 보았습니다.
(만지기 시작했을 뿐이므로 잘못되면 살짝 가르쳐 주시면 좋겠습니다!)

vue-cli에서 프로젝트를 만드는 과정은 생략됩니다.
(많은 기사 있었으므로 써도 의미 없을까라고🤔)

환경

vue/cli 4.4.6
vue: 2.6.11
FontAwsome (아이콘으로 사용했습니다. CDN으로 해 버리고 있습니다)

디렉토리

이 이미지의 웹 아래의 components 및 views를 사용합니다. (다음 router)
(Java의 프로젝트도 섞여 있기 때문에 buile.gradel 라든지 불필요한 파일도 있습니다 🙇‍♂️)

components

components 디렉토리 아래에 "goodButton.vue"라는 파일을 만듭니다.
src/
   ├ components/
렙

<template>
  <div>
    <!-- fontawsomeのCDN -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <i
      class="far fa-heart"
      @click="clickHeart"
      :class="{ 'heart-red' : isActive }"
      >
      <span class="count">{{ goodArticleCount }}</span>
    </i>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goodArticleCount: 0,
      isActive: false
    }
  },
  methods: {
    clickHeart () {
      if (this.isActive) {
        this.goodArticleCount = this.goodArticleCount - 1
        this.isActive = false
      } else {
        this.goodArticleCount = this.goodArticleCount + 1
        this.isActive = true
      }
    }
  }
}
</script>

<style>
  .fa-heart {
    font-size: 20px;
    margin-left: 35px;
    color: #5F5B5B;
    position: absolute;
    top: 150px;
    left: 700px;
  }

   .count {
    color: #5F5B5B;
  }

  .heart-red {
    color: red;
  }
</style>

버튼을 누르면 카운트가 0에서 1이 된다.
다시 누르면 1에서 0이 된다.
하트 아이콘이 회색에서 빨간색으로 되는 처리를 쓰고 있습니다.
(엄청 간단하게 쓰고 있습니다. 백엔드에 대해서는 의식하지 않습니다)

views

다음으로 GoodButton.vue를 views 아래에 만든 goodButtonResult.vue에서 immport하고,
component로 이용합니다.

src/
   ├ components/
렙
   │
   ├ components/
             ...

<template>
  <div>
    <good-button></good-button>
  </div>
</template>

<script>
import GoodButton from '../components/GoodButton'
export default {
  components: {
    'good-button': GoodButton
  }
}
</script>

결과

클릭하면 붉어지고 1 카운트됩니다.

명명 규칙이라든지 주의하는 것이 좋을지도 🤔

👇의 Qiita 참고로 했습니다(문서에도 똑같이 써있던 것 같은)
htps : // 이 m / n g long / ms / a b2 a 17 ag 483c95 a 2f15 e

인용
htps : // jp. 아 js. rg/v2/구이데/코m포넨 ts. HTML

아직 부족한 정보 등 발견하면 써 넣거나 다른 기사에서 🙇‍♂️