[Vue.JS] 템플릿 문법

Vue.JS는 렌더링 된 DOM과 Vue 인스턴스의 데이터에 바인딩 할 수 있는 HTML 기반의 문법을 제공합니다. 이 문법을 템플릿 문법이라고 하겠습니다. Vue.JS는 내부적으로 템플릿 문법을 가상 DOM을 리턴하는 render 함수로 컴파일 합니다.

Vue.JS는 가상 DOM을 사용하여 DOM을 변경할 때 최소한의 DOM을 조작하고 적용이 가능하도록 하였습니다. 템플릿 문법을 사용하지는 대신 render 함수(JSX도 지원합니다.)를 사용할 수도 있습니다. (render 함수의 사용법은 다음에 설명하도록 하겠습니다...)

Vue.JS의 템플릿 문법에 대해 알아 보도록 하겠습니다.

1. 보간법 (Interpolation)

DOM에 데이터를 바인딩 하는 방법 중에 보간법, DOM에 데이터를 나타내는 방법을 이야기 하도록 하겠습니다.

Text

Mustache 문법(이중 중괄호)을 사용해 텍스트를 나타내는 방법입니다.

<p>메시지: {{ msg }}</p>

Mustache 문법을 사용한 {{ msg }} 부분은 msg의 값으로 대체됩니다. 또한 Vue 인스턴스 data의 msg 속성이 변경될 때 마다 화면이 갱신됩니다. v-once 디렉티브를 사용하면 데이터가 변경 될 때 화면을 갱신하지 않게 됩니다.

<p v-once>다시는 변경하지 않습니다: {{ msg }}</p>

CodePen에서 위의 Mustache 문법을 사용한 예제와 v-once 디렉티브를 사용한 예제를 확인 할 수 있습니다.

Raw HTML

Mustache 문법을 사용하여 DOM을 나타내면 HTML이 아닌 일반 텍스트로 DOM에 나타납니다. HTML로 출력하려면 v-html 디렉티브를 사용해야 합니다.

<p>Mustache: {{ rawHtml }}</p>
<p>v-html: <span v-html="rawHtml"></span></p>

span의 내용은 rawHtml에 저장된 내용으로 대체됩니다. 이 때 rawHtml에 저장된 HTML에 바인딩된 데이터(보간법, 디렉티브로 바인딩 된 데이터들..)는 단순 문자열로 인식됩니다. 즉 v-html을 이용한 HTML들은 템플릿 문법을 사용할 수 없습니다.

CodePen에서 v-html을 사용한 예제를 확인 할 수 있습니다.

Attribute

Mustache 문법은 HTML 속성에 사용할 수 없습니다. HTML 속성에 Vue 데이터를 사용하기 위해서는 v-bind를 사용해야 합니다.

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

<div id="{{ dynamicId }}"></div>를 사용한다면 Syntax Error가 발생합니다.

CodePen에서 v-bind를 사용한 예제를 확인 할 수 있습니다.

JavaScript 표현식 사용

Vue.JS의 모든 데이터 바인딩(템플릿 문법)에서는 JavaScript 표현식 사용이 가능합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

위와 같은 JavaScript 표현식 사용이 가능합니다. 하지만 하나의 표현식만 가능하기 때문에,

<!-- 아래는 구문입니다, 표현식이 아닙니다. -->
{{ var a = 1 }}

<!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. -->
{{ if (ok) { return message } }}

위와 같은 JavaScript는 사용 할 수 없습니다. 또한 Math나 Date 같은 전역 객체는 사용 가능하지만, 사용자가 정의한 전역 객체는 사용 할 수 없습니다.

<div>{{ Math.round(1.2) }}</div>

<!-- 사용 불가능 합니다 -->
<div>{{ CustomGlobals.round(1.2) }}</div>
<script>
var CustomGlobals = {
  round(value) {
    return Math.round(value)
  }
}
</script>

사용자가 정의한 전역 객체는 사용 할 수 없습니다.

CodePen에서 JavaScript 사용 예제를 확인 할 수 있습니다.

2. 디렉티브 (Directive)

디렉티브는 v- 접두어가 있는 특수한 속성입니다. 디렉티브는 디렉티브의 속성 값이 변경 될 때, DOM과 바인딩 하여 DOM을 변경하는 역할을 합니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

위의 예제에서 seen은 <p>와 바인딩됩니다. seen이 변경 될 때, v-if 디렉티브로 인해 DOM에 삽입 또는 제거 되어 보이게 됩니다.

전달인자 (Argument)

일부 디렉티브(v-bind, v-on)는 콜론(:)을 사용하여 전달인자를 사용할 수 있습니다.

v-bind

v-bind는 HTML 속성을 갱신하는데 사용됩니다.

<a v-bind:href="url">LINK</a>

위의 예제에서 href는 전달인자입니다. href 속성을 url 값에 바인드하는 v-bind 디렉티브에게 알려줍니다.

v-on

v-on은 이벤트 핸들링을 하는데 사용됩니다.

<a v-on:click="doSomething">LINK</a>

위의 예제에서 click은 전달인자입니다. click 이벤트가 발생했을 때 호출되는 doSomething 함수를 v-on 디렉티브에게 알려줍니다.

CodePen에서 전달인자 예제를 확인 할 수 있습니다.

수식어 (Modifiers)

수식어는 점(.)으로 표시되는 특수 접미사 입니다. 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다.

<form v-on:submit.prevent="onSubmit">
  <input type="submit" value="submit" />
</form>

위 예제의 .prevent 수식어는 실행된 이벤트 핸들러(onSubmit)에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 알려줍니다.

CodePen에서 수식어 예제를 확인 할 수 있습니다.

3. 약어

가장 자주 사용되는 v-bind와 v-on은 약어가 제공됩니다.

v-bind 약어

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

v-on 약어

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

참고

• https://kr.vuejs.org/v2/guide/syntax.html