템플릿 Mustache 문법

Vue.js 템플릿 Mustache 문법 상세 가이드

서론

Vue.js는 간결하고 효율적인 템플릿 문법을 제공하여 개발자들이 쉽고 빠르게 동적인 웹 인터페이스를 구축할 수 있도록 돕습니다. 그 중에서도 Mustache 문법은 데이터와 뷰를 연결하는 가장 기본적인 방법으로, Vue.js 템플릿의 핵심을 이루는 부분입니다. 이 글에서는 Vue.js Mustache 문법에 대해 자세히 알아보고, 다양한 예시를 통해 활용 방법을 설명하겠습니다.

Mustache 문법이란?

Mustache 문법은 더블 커브 브레이스 {{ }} 사이에 데이터를 표현하는 간단한 문법입니다. 이 문법을 통해 템플릿 내에서 데이터를 동적으로 바인딩하여 화면에 출력할 수 있습니다. 즉, Vue 인스턴스의 데이터가 변경되면, 해당 데이터가 바인딩된 템플릿의 내용도 자동으로 업데이트되는 것입니다.

728x90

Mustache 문법 활용 예시

1. 텍스트 보간

<template>
  <div>
    <p>안녕하세요, {{ name }}님!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '홍길동'
    }
  }
}
</script>

 

위 예시에서 {{ name }} 부분은 Vue 인스턴스의 name 데이터와 연결되어 있습니다. 따라서 화면에는 "안녕하세요, 홍길동님!"이라는 문자열이 출력됩니다. 만약 name 데이터가 변경되면 화면에 출력되는 문자열도 자동으로 업데이트됩니다.

2. 속성 바인딩

<template>
  <img :src="imageUrl" alt="이미지">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

 

v-bind 지시어를 사용하여 HTML 속성에 데이터를 바인딩할 수 있습니다. 위 예시에서는 img 태그의 src 속성에 imageUrl 데이터를 바인딩하여 이미지 경로를 동적으로 설정합니다.

3. 조건부 렌더링

<template>
  <div v-if="show">
    <p>이 내용은 show가 true일 때만 보입니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

 

v-if 지시어를 사용하여 조건에 따라 요소를 렌더링할 수 있습니다. 위 예시에서는 show 데이터가 true일 때만 해당 내용이 화면에 나타납니다.

4. 리스트 렌더링

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '홍길동' },
        { id: 2, name: '이순신' }
      ]
    }
  }
}
</script>

 

v-for 지시어를 사용하여 배열 데이터를 반복하여 렌더링할 수 있습니다. 위 예시에서는 items 배열의 각 요소를 리스트 항목으로 출력합니다.

 

Mustache:
[종종 pl.] [미국] 코밑수염 ([영국] moustache), 동물의 수염, 새의 수염 비슷한 깃털, 콧수염 모양의 것 (=beard)

Mustache 문법의 장점

• 간결하고 직관적: 데이터와 뷰를 연결하는 방식이 매우 간단하여 쉽게 학습하고 사용할 수 있습니다.
• 반응형: 데이터가 변경되면 화면이 자동으로 업데이트되어 실시간으로 변화하는 UI를 구현하기 좋습니다.
• 유연성: 다양한 표현식과 지시어를 조합하여 복잡한 템플릿을 구축할 수 있습니다.

결론

Vue.js Mustache 문법은 Vue.js 템플릿의 기본이 되는 중요한 개념입니다. 이 글을 통해 Mustache 문법의 기본적인 사용법과 다양한 활용 예시를 살펴보았습니다. Mustache 문법을 숙달하면 Vue.js를 이용하여 더욱 효과적이고 유연한 웹 애플리케이션을 개발할 수 있을 것입니다.