[Vue] Vue의 템플릿 문법에 대하여! - 개념 정리

템플릿 문법

Vue의 템플릿 문법이란 데이터를 렌더링 된 DOM에 바인딩하여 화면을 조작하는 방법을 말합니다.
템플릿 문법은 크게 데이터 바인딩과 디렉티브 두가지로 나누어 볼 수 있습니다.
먼저 데이터 바인딩과 관련 된 부분 먼저 살펴보면 아래와 같습니다.

1. 데이더 바인딩

텍스트 보간법

텍스트 보간법은 뷰의 데이터 바인딩으로 사용되는 가장 기본적인 방법으로 "Mustache"(이중 중괄호) 문법을 사용하는 방법입니다

<span>메시지: {{ message }}</span>

해당 부분에서 이중 중괄호 안의 message는 컴포넌트의 message 데이터 값으로 대체가 됩니다.
예를 들어보면 message값이 안녕하세요!라면 실질적으로는 아래와 같은 코드가 됩니다.

<span>메시지: 안녕하세요!</span>

그리고 message 값이 변경 될 때마다 변경된 값으로 업데이트가 됩니다.

 

2. 디렉티브

디렉티브란 뷰에서 화면의 요소들을 쉽게 제어를 하기 위한 템플릿 문법으로 v- 접두사가 붙어있는 속성들을 말합니다.
디렉티브는 다양한 속성들이 존재합니다.

• v-if
• v-for
• v-show
• v-on
• v-bind
• v-model
• ...

이중에서 v-bind 먼저 알아보고 나머지는 따로 추후에 더 설명하도록 하겠습니다.

v-bind

v-bind의 경우는 속성을 바인딩하는 디렉티브입니다.
위의서 설명드린 텍스트 보간법의 이중 중괄호의 경우는 속성내에서는 사용할 수가 없습니다.
따라서 속성에서는 v-bind를 사용하여 데이터를 바인딩 할 수 있습니다. 사용방법은 아래와 같습니다.

<div v-bind:id="dynamicId"></div>

v-bind 디렉티브는 div의 id 속성을 컴포넌트의 dynamicId 속성과 데이터 동기화가 된 상태로 유지하도록 Vue에 지시합니다.
또한 여기서 만약 바인딩된 값이 null | undefined이면 엘리먼트의 바인딩한 해당 속성이 제거된 상태로 렌더링 됩니다.
그리고 v-bind의 경우는 뷰에서 많이 사용되는 디렉티브이기 떄문에 전용 단축 문법으로 사용할 수 있으며, 그 방법은 다음과 같습니다.

<div :class="wrapper"></div>

v-bind의 경우 boolean 값을 바인딩 할 수도 있으며, 여러 속성을 동적으로 바인딩할 수도 있습니다.

<button :disabled="isDisabled">확인</button>
/**
isDisabled의 값이 `truthy` 값일 경우에는 버튼에 `disabled` 속성이 표기되며, 
값이 `falsy` 값의 경우에는 속성이 생략이 됩니다.
**/
---

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>
// div에 id는 'container', class는 'wrapper'가 바인딩이 됩니다.

참고

템플릿 문법
뷰의 템플릿 문법