템플릿 문법

Vue.js 는 랜더링 된 DOM 을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용한다.

모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수 있는 유효한 HTML 이다.

내부적으로 Vue 는 템플릿을 가상 DOM 랜더링 함수로 컴파일 함.

가상 DOM 개념에 익숙하고 JavaScript 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있다.

선택사항으로 JSX 지원함.

이에 대하여 자세히 알고 싶으면 Vue.js 공식 사이트 (Render Functions & JSX ) 접속하면 된다.

보간법(Interpolation)

텍스트 보간은 "Mustache" 구문(이중 중괄호 {{}} )을 사용하며, 그 안에 들어간 데이터는 일반 텍스트로 해석한다.

v-once 디렉티브 사용하면 데이터 변경 시 업데이트 되지 않는 1회성 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미치므로 유의.

실제 HTML 을 출력하려면 v-html 디렉티브를 사용.

span 의 내용은 rawHTML 으로 대체됨. 이 때, 데이터 바인딩은 무시된다. 이게 무슨 말이냐면 아래 이미지를 참조해보면 알 수 있다.

여기서 주의할 점은 Vue 은 문자열 기반 템플릿 엔진이 아니기 때문에 v-html 을 이용해 템플릿을 사용할 수가 없다.

이와 달리 컴포넌트는 UI 재사용 및 구성을 위한 기본 단위로 사용하는 것을 추천한다.

웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있다. 신뢰할 수 있는 콘텐츠에서는 HTML 보간만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안된다.

"Mustaches"는 HTML 속성에서 사용할 수가 없다. 대신, v-bind 디렉티브를 사용해야 한다.

이 말은 즉 <div id={{}}></div> 으로 사용이 안된다는 의미이다. 대신에 <div v-bind:id="dynamicId"></div> 으로 사용하라는 의미이다.

boolean 속성을 사용할 때, 단순히 true 인 경우, v-bind 는 다르게 작동한다. 즉, false 으로 들어간 속성은 렌더링 된 태그의 엘리먼트에 포함이 되지 않는다.

템플릿 표현식은 샌드박스 처리되며, Math와 Date 같은 전역으로 사용 가능한 것에만 접근할 수 있다. 템플릿 표현식에서 사용자 정의 전역에 엑세스 하지 말 것.

v- 접두사가 있는 특수 속성. 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. ( v-for 은 예외 )

디렉티브 역할은 표현식의 값이 변경될 때, 사이드이펙트를 반응적으로 DOM 에 적용하는 것.

일부 디렉티브는 콜론(:)으로 표시되는 "전달인자" 를 사용할 수 있다.

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

v- 접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 한다. 그 중 가장 자주 사용되는 두개의 디렉티브인 v-bind 와 v-on 에 대해서 특별한 약어를 제공.