선언적 랜더링과 입력 핸들링

vue 파일 코드 구조

• <template> 태그 사이에는 HTML 코드를 입력
• <script> 태그 사이에는 JS 코드를 입력
• <style> 태그 사이에는 CSS 코드를 입력

 

반응성 예제

반응성: 데이터가 바뀌면 별다른 작업을 하지 않아도 화면이 바뀌는 것을 의미한다.

<template>
  <!-- {{ JS에서 들어오는 데이터 }} -->
  <!-- @click="increase": 클릭 이벤트 선언 -->
  <h1 @click="increase">
    {{ count }}
  </h1>
</template>

<script>
export default {
  data: function () {
    return {
      // count 변수에 0을 대입
      count: 0,
    };
  },
  // 함수 선언
  methods: {
    increase() {
      // 함수가 실행될때마다 1씩 증가
      this.count += 1;
    },
  },
};
</script>

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

 

npm run dev로 실행

 

브라우저 확인: h1태그를 클릭하면 1씩 증가되는 것을 확인할 수 있다.