[Vue] Template Syntax

# Template Syntax란?

DOM을 기본 구성 요소 인스턴스의 데이터에

선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용

= Vue Instance와 DOM을 연결하는 확장된 문법을 제공

 

 

1. Text Interpolation

<p>Message: {{ msg }}</p>

• 데이터 바인딩의 가장 기본적인 형태
• 이중 중괄호 구문(콧수염 구문)을 사용
• 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체
• msg 속성이 변경될 때마다 업데이트 됨

 

2. Raw HTML

<div v-html="rawHtml"></div>
...
const rawHtml = ref('<span style="color:red">This should be red.</span>')

• 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용해야함

 

3. Attribute Bindings

<div v-bind:id="dynamicId"></div>
...
const dynamicId = ref('my-id')

• 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind를 사용
• HTML의 id 속성 값을 vue의 dynamicId 속성과 동기화되도록 함
• 바인딩 값이 null이나 undefind인 경우 랜더링 요소에서 제거 됨

 

4. JavaScript Expressions

<div>
  {{ number + 1 }}
  {{ ok ? 'YES' : 'NO' }}
  {{ message.split('').reverse().join('') }}
  <div :id="`list-${id}`"></div>
</div>

• Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원함
• 어디서 쓸 수 있나요?
  • 콧수염 구문 내부
  • 모든 directive의 속성 값(v-로 시작하는 특수 속성)
• 각 바인딩에는 하나의 단일 표현식만 포함될 수 있음(= return 뒤에 사용할 수 잇는 코드여야 함)

<!-- 표현식이 아닌 선언식, 흐름제어는 안됨 -->
{{ const number = 1 }}
{{ if (ok) {return message} }}