예제 코드는 콧수염 문법으로 message 데이터 속성의 값을 출력합니다. 그러나 v-pre 디렉티브가 사용되어서 <div> 태그 요소는 컴파일에서 제외됩니다. 결국 {{ message }}는 컴파일되지 못하고 단순하게 텍스트로 취급되어 그대로 출력됩니다.

그림 3-11 v-pre 실행결과

● v-bind

콧수염 문법에서는 data 옵션 속성으로 정의한 데이터 속성의 값을 <template> 태그 영역에서 HTML 태그의 속성 값으로 지정할 수 없습니다. 그래서 다음과 같이 작성하면 안 됩니다.

틀린 문법

<template> 
  <h1 class={{ className }}>안녕하세요</h1> 
</template>