Vue Template Syntax

---

Template Syntax

Text Interpolation

<p></p>

• ref값을 동적 텍스트로 렌더링 하는 방법
• 이중괄호 문법 또는 콧수염 구문이라고도 한다.
• 식별자나 경로 이외에 Javascript 표현식도 사용 가능하다.
• 주로 텍스트 삽입시에만 사용한다.

<h1></h1>

HTML 출력

• Text Interpolation 은 데이터를 html 이 아닌 일반 텍스트로 해석
• 실제 html 출력을 위해서는 v-html Directive를 사용해야 한다.

<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

Binding

Boolean 속성 Binding

• 속성의 표시 여부를 Boolean 속성의 변수로 분기

<button :disabled="isButtonDisabled">버튼</button>

Object Binding

• ex1)

const classObject = reactive({ active: true, 'text-danger': false })

<div :class="classObject"></div>

• ex2)

const isActive = ref(true)  
const error = ref(null)  
  
const classObject = computed(() => ({  
  active: isActive.value && !error.value,  
  'text-danger': error.value && error.value.type === 'fatal'  
}))

<div :class="classObject"></div>

Array Binding

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

javascript 표현식 사용

• vue는 모든 데이터 바인딩 내에 javascript 표현식 지원
  • 이중괄호 내부
  • 모든 Vue-Directive 속성 내부
• 하나의 단일 표현식만 가능
• 함수호출 가능

  
  
  
<div :id="`list-${id}`"></div>

---

연결문서

• Vue-Directive