[Vue] Vue에서 데이터, 메서드 만들고 화면에 출력해주기 (Declarative Rendering)

App.vue

<template>
  <DeclarativeRendering />
</template>

<script>
import DeclarativeRendering from './components/DeclarativeRendering.vue';

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

<style>
h1 {
  font-size: 30px;
}
h2 {
  font-size: 25px;
  color: royalblue;
}
</style>

DeclarativeRendering.vue

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

<script>
export default {
  name: 'DeclarativeRendering',
  // 데이터
  data() {
    return {
      count: 0,
    };
  },
  // 메서드
  methods: {
    increase() {
      this.count += 1;
    },
  },
};
</script>

 

Vue에서는 increase라는 메서드를 호출하기 위해서 함수 그 자체를 전달하거나 인수를 전달해주어야할 경우 인수를 넣어 해당 함수를 호출해준다.

<template>
  // increase라는 메서드를 전달
  <h2 @click="increase">{{ count }}</h2>
</template>

<template>
  // 인수가 필요한 경우 인수를 전달해 함수를 호출해준다
  <h2 @click="increase(1)">{{ count }}</h2>
</template>