템플릿 문법
Vue는 컴포넌트 객체의 데이터를 렌더링된 DOM(Document Object Model)에 서술적으로 렌더링할 수 있는
HTML기반 템플릿 문법을 사용한다.
내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일한다.
반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 리렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화한다.
가상 DOM 개념에 익숙하며, javascript의 원시적인 작동법을 선호하는 경우 jsx(JavaScript Syntax eXtension=react문법) 지원옵션을 사용하여 템플릿 대신 렌더링 함수를 직접 작성할 수도 있지만, 템플릿과 동일한 수준의 컴파일 시간 최적화를 기대할 수 없다.
텍스트 보간법
Mustache(이중 중괄호) 문법을 사용한 텍스트 보간법.
<span>메세지: {{ msg }}</span>msg는 해당 컴포넌트 객체의 msg 속성의 값으로 대체된다. 값이 변경되는 경우 실시간으로 갱신된다.
HTML 출력
이중 중괄호는 일반 텍스트(innerTEXT)로 해석되며, 실제 HTML(innerHTML)로 출력하려면 디렉티브를 사용해야 한다.
<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>디렉티브는 Vue에서 제공하는 특수한 속성을 나타내기 위해 접두사 `v-`를 사용하며 자주 사용하는 디렉티브는 접두사를 생략한 단축문법을 사용할 수 있다.
웹 사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS(Cross Site Scripting) 취약점이 쉽게 발생할 수 있기 때문에 신뢰할 수 있는 컨텐츠를 동적으로 렌더링하는데만 사용하고, 사용자가 제공한 컨텐츠에는 사용하면 안 된다.
속성 바인딩
이중 중괄호는 일반 텍스트로 해석되기 때문에 속성내에서는 사용할 수 없고, v-bind 디렉티브를 사용해야 한다.
# 기본 문법 #
<div v-bind:id="dynamicId"></div>
# 단축 문법 #
<div :id="dynamicId"></div>v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지하도록 Vue에 지시한다. 바인딩된 값이 null 또는 undefined이면 엘리먼트의 속성이 제거된 상태로 렌더링 된다.
불리언 속성
truthy / falsy
가장 일반적으로 사용되는 disabled를 예시로 살펴보자. truthy 값이 있는 경우 당연히 속성이 표기되고, falsy인 경우에는 속성이 생략된다.
다만, 속성값이 빈 문자열인 경우 <button disabled="">의 일관성을 유지하여 속성이 표기된다.
<button :disabled="isButtonDisabled">버튼</button>여러 속성 동적 바인딩
여러 속성을 나타내는 JavaScript 객체가 있는 경우 인자 없이 디렉티브를 사용하여 단일 앨리먼트에 바인딩 할 수 있다.
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
<div v-bind="objectOfAttrs"></div>JavaScript 표현식 사용
지금까지는 템플릿의 간단한 속성 키에만 바인딩했지만, Vue는 실제로 모든 데이터 바인딩 내(텍스트 보간법 내부, 디렉티브 속성 내부)에서 JavaScript 표현식의 모든 기능을 지원한다.
다만 선언식은 불가능하며, 각 바인딩 별로 단 하나의 표현식만 사용이 가능하기 때문에 이 점을 유의해야 한다.
{{ number + 1}}
{{ isOk ? '예' : '아니오' }}
{{ message.split('').reverse.join('') }}
<div :id="`list-${id}`"></div>
# 표현식은 return으로 반환할 수 있는, 값으로 평가할 수 있어야 한다.
{{ var a = 1 }} -- 선언식 불가
{{ if (isOk) {return message} }} -- 흐름 제어 불가. 삼항연산자 사용 必함수 호출
바인딩 표현식 내부에서 컴포넌트에서 노출하는 메서드를 호출할 수 있다.
다만, 바인딩 표현식 내부에서 호출하는 함수는 컴포넌트가 업데이트 될 때마다 호출되기 때문에, 데이터 변경 또는 비동기 작업을 트리거 하는 등의 부작용이 없도록 유의해야 한다.
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>제한된 전역 접근
템플릿 표현식은 샌드박스 처리되어 제한된 전역 리스트에만 접근할 수 있다. 이 목록은 Math 및 Date 등 일반적으로 사용되는 기본 제공 전역 객체를 표시한다.
리스트에 명시적으로 포함되지 않은 window와 같은 전역 속성은 템플릿 표현식에서 접근할 수 없다. 그러나 app.config.globalProperties에 추가하여, Vue 내부의 모든 표현식에서 전역 속성에 접근 할 수 있도록 명시적으로 정의할 수 있다.
디렉티브
