템플릿 문법 - Vue.js

텍스트 보간법

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

• {{}} 이중 중괄호 사용
• 해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체됨

---

HTML 출력

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

• v-html 디렉티브 사용
• rawHtml 속성 값을 일반 HTML로 해석한 것으로 대체됨
• 데이터 바인딩은 무시됨

⚠️ 임의의 HTML을 동적으로 렌더링하면 XSS 취약점 발생하므로 신뢰할 수 있는 컨텐츠에만 사용

---

속성 바인딩

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div> <!-- 단축 문법 -->
<div :id></div> <!-- :id="id" 와 동일 (3.4+) -->
<div v-bind:id></div> <!-- :id="id" 와 동일 (3.4+)-->

• {{}} 은 HTML 속성(attribute)내에서 사용 불가하므로 대신 v-bind디렉티브 사용
• element의 id속성을 dynamicId 속성과 동기화된 상태로 유지
• 바인딩된 값이 null, undefined 라면 element 속성이 제거되어 렌더링

Boolean 속성

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

• element에 표기했는지 여부로 참/거짓 값을 나타내는 속성
• isButtonDisabled 에 truthy 값이 있는 경우 disabled 속성이 표기됨
• falsy 값의 경우 속성 생략

여러 속성을 동적으로 바인딩

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>

• 여러 속성을 나타내는 JavaScript 객체를 v-bind로 단일 엘리먼트에 바인딩 가능

---

JavaScript 표현식 사용

Vue 템플릿에서 JavaScript 표현식은 다음과 같은 위치에 사용 가능

• 이중 중괄호(텍스트 보간법) 내부
• 모든 Vue 디렉티브 속성(v- 로 시작하는 특수 속성) 내부

• 하나의 표현식만 가능
• 제한된 전역 접근
  • 제한된 전역 리스트에만 접근 가능
  • app.config.globalProperties에 추가하여, Vue 내부의 모든 표현식에서 전역 속성에 접근 할 수 있도록 명시적으로 정의 가능
• 메서드 호출 가능

ℹ️ 컴포넌트가 업데이트 될 때마다 함수가 호출되므로, 데이터를 변경 또는 비동기 작업을 트리거하는 등의 부작용이 없어야 함

---

디렉티브

• v- 접두사가 있는 특수한 속성
• Vue는 빌트인 디렉티브 제공

• 이름 : v- 로 시작
• 인자(인수) : : 뒤에 표현됨, v-bind, v-on 디렉티브 등에서 사용
• 동적인 인자 [] : 인자를 대괄호로 감싸서 JavaScript 표현식으로 사용 가능
  • null 또는 문자열 : null이면 바인딩을 명시적으로 제거, 문자열 외의 값은 에러 트리거
    ⚠️ 동적인 인자 표현식에는 특정 문자가 유효하지 않아 몇 가지 제약 사항이 있음

• 수식어 : . 으로 시작
  • 디렉티브가 특정한 방식으로 바인딩 되어야 함을 의미
• 값 : JavaScript의 표현식