[Vue.js][Ch1][Vue 시작하기] 선언적 렌더링과 입력 핸들링

vue라는 하나의 단일 파일의 component 개념에서는 (SFC : Single File component)

template / script / style 세가지의 태그로 구성한다.

• template - HTML
• script - JavaScript
• style - CSS (SCSS)
  • style이 필요하지 않으면 명시하지 않아도 된다.

데이터를 바꾸면 화면도 바뀐다 => 반응성(Reactivity)

App.vue

<template>
  <h1 @click="increase">    <!-- h1 태그를 클릭하면 increase 함수가 실행됨 -->
    {{ count }}             <!-- JavaScript에서 오는 데이터라는 의미로 {{ }} 사용 -->
  </h1>
</template>

<script>
export default {    // 객체 리터럴을 기본으로 내보내기
  data() {    // data(): function() { 과 동일
    return {  // 객체 데이터를 반환
      count: 0 
    }
  },
  methods: {
    increase() {    // 함수 생성
      // this는 script(태그) 부분을 지칭
      this.count += 1;
    }
  }

}
</script>

<style>
 h1 {
   font-size: 50px;
   color: yellowgreen;
 }
</style>

출력

count라는 데이터를 갱신하면 연결되어있는 브라우저의 화면도 같이 갱신된다 => 반응성(Reactivity)

만약, style을 선언했을 때 Error가 발생한다면

vue-style-loader를 4.1.2 버전으로 내려야 한다.

(나는 vue-style-loader가 4.1.3 버전이었음)