3.3.5 디렉티브 사용하기

<script> 태그 영역에서 정의한 data 옵션 속성을 <template> 태그 영역에서 사용할 수 있게 하는 방법 중에 디렉티브가 있습니다. 디렉티브(directive)는 뷰에서만 사용하는 문법으로, 접두사 ‘v-’가 붙습니다. <template> 태그 영역에서 사용하며 HTML 태그의 속성으로만 표현합니다. 현재(24년 3월 기준) 디렉티브는 총 15개(https://vuejs.org/api)입니다. 여기서는 뷰의 다른 기능을 몰라도 바로 이해할 수 있는 디렉티브만 살펴보겠습니다. 여기서 다루지 않은 디렉티브는 기능을 배우며 하나씩 설명하겠습니다.

● v-html

data 옵션 속성으로 정의한 데이터 속성을 <template> 태그 영역에서 출력할 때 콧수염 문법을 사용합니다. 이 방법은 값에 HTML 태그가 포함되었으면 값을 단순 텍스트로 치환해 출력합니다. 예를 들면 다음과 같습니다.