SeouliteLab

[Vue.js] Vue 데이터 관리: data 속성 이해하기 본문

카테고리 없음

[Vue.js] Vue 데이터 관리: data 속성 이해하기

Seoulite Lab 2024. 4. 25. 08:16

Vue.js에서는 데이터를 관리하기 위해 각 Vue 인스턴스에 data 속성을 사용합니다. 이 data 속성은 Vue 애플리케이션에서 사용되는 상태(state)를 정의하고, 이를 템플릿과 연결하여 동적으로 화면을 업데이트할 수 있습니다.

data 속성이란?

data 속성은 Vue 인스턴스에 정의되는 객체로, 애플리케이션에서 사용되는 상태를 저장합니다. 이 상태는 템플릿 내에서 보간(interpolation)이나 디렉티브를 통해 사용되어 화면에 표시됩니다. data 속성에 정의된 데이터가 변경되면 Vue는 이를 감지하여 자동으로 화면을 업데이트합니다.

예제

아래 예제에서는 Vue 인스턴스의 data 속성을 사용하여 간단한 카운터 애플리케이션을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 데이터 관리 - data 속성 예제</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app">
  <p>카운터: {{ count }}</p>
  <button @click="increment">증가</button>
</div>

<script>
  // Vue 인스턴스 생성
  const app = Vue.createApp({
    data() {
      return {
        count: 0 // 데이터 속성 정의
      };
    },
    methods: {
      increment() {
        this.count++; // count 값을 증가시키는 메소드
      }
    }
  });

  // 애플리케이션을 #app 요소에 마운트
  app.mount('#app');
</script>

</body>
</html>
저작자표시 비영리 변경금지