템플릿 문법 | Vue.js

Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반의 템플릿 문법을 사용한다.

• 모든 Vue 템플릿은 브라우저 및 HTML 파서에서 문법적으로 유효하다.

• 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일 한다.

  • 앱의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 파악하여 DOM 조작을 최소화한다.

텍스트 보간법

→ 데이터 바인딩의 가장 기본적인 형태는 “Mustache”(이중 중괄호) 문법을 사용한 텍스트 보간법이다.

<span>메세지: {{ msg }}</span>

• 이중 중괄호 태그 내 msg 는 해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체되고, 속성이 변경될 때마다 업데이트된다.

HTML 출력

→ 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석한다.

• 실제 HTML을 출력하려면, v-html 디렉티브를 사용해야 한다.

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>