Vue.js는 프론트엔드 개발을 쉽게 할 수 있도록 도와주는 JavaScript 프레임워크입니다. Vue.js의 핵심 기능 중 하나는 템플릿 문법입니다. 이를 사용하여 HTML 템플릿 내에 JavaScript 코드를 쉽게 작성할 수 있습니다.

보간법 (Interpolation)

Vue.js의 템플릿 문법에서 가장 기본이 되는 것은 보간법입니다. 이를 사용하여 뷰 인스턴스의 데이터를 HTML 템플릿에 엮을 수 있습니다. 보간법은 “Mustache” 구문인 이중 중괄호({{}})로 작성됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

<div>
  <p>{{ message }}</p>
</div>

위의 코드에서 message는 뷰 인스턴스의 데이터로 정의되고, 이를 템플릿에서 사용하여 동적으로 값을 출력합니다.

디렉티브 (Directives)

디렉티브는 v- 접두사를 가지는 특수 속성으로, 템플릿에서 사용됩니다. 디렉티브는 Vue.js의 핵심 기능 중 하나로, DOM 요소를 조작하거나 데이터 바인딩을 수행하는 역할을 합니다.

v-bind 디렉티브

v-bind 디렉티브는 엘리먼트의 속성과 뷰 인스턴스의 데이터를 연결합니다. 일반적으로 HTML 요소의 속성에 동적으로 데이터를 바인딩하기 위해 사용됩니다.

예를 들어, 다음과 같이 사용할 수 있습니다.

<img v-bind:src="imageSrc">

위의 코드에서 imageSrc는 뷰 인스턴스의 데이터로 정의되고, v-bind:src 디렉티브를 사용하여 이미지 태그의 속성에 데이터를 동적으로 연결합니다.

v-for 디렉티브

v-for 디렉티브는 배열 데이터를 반복하여 여러 개의 엘리먼트를 생성하는데 사용됩니다. 배열의 각 항목을 가리키는 변수를 선언하고, v-for 디렉티브를 사용하여 반복 요소를 생성합니다.

예를 들어, 다음과 같이 사용할 수 있습니다.

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

위의 코드에서 items는 뷰 인스턴스의 배열 데이터로 정의되고, v-for 디렉티브를 사용하여 item 변수를 선언하여 배열의 각 항목을 출력합니다.

조건부 렌더링

Vue.js의 템플릿 문법을 사용하면 조건부로 엘리먼트를 렌더링할 수 있습니다. v-if 디렉티브를 사용하여 특정 조건에 따라 엘리먼트가 표시되거나 숨겨지도록 할 수 있습니다.

예를 들어, 다음과 같이 사용할 수 있습니다.

<p v-if="showMessage">{{ message }}</p>

위의 코드에서 showMessage는 뷰 인스턴스의 데이터로 정의되고, v-if 디렉티브를 사용하여 showMessage의 값에 따라 메시지를 표시하거나 숨깁니다.

요약

Vue.js의 템플릿 문법은 HTML 템플릿 내에서 JavaScript 코드를 쉽게 작성할 수 있도록 도와줍니다. 보간법을 사용하여 데이터를 출력하고, 디렉티브를 사용하여 엘리먼트를 조작하거나 데이터를 바인딩할 수 있습니다. 조건부 렌더링을 통해 특정 조건에 따라 엘리먼트를 표시하거나 숨길 수 있습니다.

더 자세한 내용은 Vue.js 공식 문서를 참고하시기 바랍니다.