[Vue.js] Vue 템플릿(template) 이해하기

예제

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>이름: {{ name }}</p>
    <button @click="changeName">이름 변경</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '홍길동',
      greeting: '안녕하세요,'
    };
  },
  methods: {
    changeName() {
      this.name = '이몽룡';
    }
  }
}
</script>

설명

• Vue.js에서는 컴포넌트의 UI를 정의하기 위해 템플릿(template)을 사용합니다. 템플릿은 HTML 코드와 Vue 인스턴스의 데이터와 연결되어 동적인 UI를 생성합니다.
• 위 예제에서 <template> 태그 내부에는 Vue 인스턴스의 데이터를 표시하는 HTML 코드가 포함되어 있습니다. {{ }} 문법을 사용하여 데이터를 바인딩할 수 있습니다.
• Vue 컴포넌트는 data 속성을 통해 컴포넌트의 초기 데이터를 정의합니다. 위 예제에서는 name과 greeting이라는 데이터 속성을 정의하고 초기값을 할당했습니다.
• 메서드(methods)는 Vue 컴포넌트에서 사용할 수 있는 함수를 정의하는 영역입니다. 위 예제에서는 changeName 메서드를 정의하여 버튼을 클릭했을 때 name 데이터를 변경하고 있습니다.

주요 특징

• 동적 UI 생성: Vue의 템플릿을 사용하면 데이터와 UI를 동적으로 연결하여 반응형 UI를 생성할 수 있습니다.
• 가독성: 템플릿을 사용하면 HTML 코드와 Vue 데이터가 분리되어 있어 가독성이 높아집니다.
• 재사용성: 컴포넌트를 사용하여 템플릿을 작성하면 재사용성이 높아지며, 코드의 유지보수성이 향상됩니다.