Vue2 에서 button click 함수로 숫자 카운트하는 예제

1. Vue 파일 만들기

• 프로젝트폴더> src> components> CounterNumber.vue 파일을 생성한다.

// @CounterNumber.vue
<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }    
</script>
    
<template>    
    <div>
        <label>{{ count }}</label>&nbsp;
        <button @click="count++">Count</button>&nbsp;
        <button @click="count--">Discount</button>&nbsp;
    </div>
</template>

2. App.vue 파일 내용 수정하기

• 프로젝트폴더> src> App.vue 파일 내용을 수정한다.

// @App.vue
<template>
  <div id="app">
     <SampleApp></SampleApp>
  </div>
</template>

<script>
<!-- App.vue의 컴포넌트 위치를 지정하는 부분만 수정한다. -->
import SampleApp from './components/CounterNumber.vue'

export default {
  name: 'App',
  components: {
    SampleApp 
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #09045f;
  margin-top: 60px;
}
</style>

3. Vue 프로젝트 실행하기

npm run serve