[Vue] Counter 프로그램 만들기

 

안녕하세요. 혀코입니다.

 

이번 시간에는 Vue를 사용해서 간단한 Counter 프로그램을 만들어 보겠습니다.

 

지난 시간에 Vue + Vite 프로젝트 시작하기에 이어서 진행합니다.

 

App.vue 파일의 내용을 모두 지우고 가장 기본적인 App.vue 코드를 작성합니다.

 

<template>
// Vue 문법을 적용한 HTML 코드를 이곳에 작성합니다.
</template>

<script>
// Vue 문법을 적용한 JS 코드를 이곳에 작성합니다.
</script>

<style>
// css 또는 scss 코드를 이곳에 작성합니다.
</style>

 

가장 기본이 되는 vue 코드는 <template>, <script> 와 <style> 입니다. <template> 안에 Vue 문법을 적용한 HTML 코드를 작성하고, <script> 안에 Vue 문법을 적용한 JS 코드를 작성하고, <style> 태그 안에는 css 또는 scss 코드를 작성합니다.

 

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

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

 

이렇게 작성하면, 숫자를 클릭하면, 숫자가 1씩 증가하게 됩니다.

 

이렇게 Vue를 사용해서 간단한 Counter 프로그램을 만들어 봤습니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)