Vue.js 선언적 렌더링과 입력 핸들링

 

예제

 

반응성 (Reactivity)

- 데이터를 갱신하면 화면도 바뀐다 

 

<!-- App.vue -->

<!-- .vue 확장자를 가진 싱글 파일 컴포넌트 SFC (Single File Component) -->
<!-- template, script, style 3가지 태그로 구성 -->

<!--  HTML(Vue) -->
<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
</template>

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

<!--  CSS(SCSS) -->
<style>
  h1 {
    font-size: 50px;
    color: royalblue;
  }
</style>