6. 템플릿 문법 (텍스트 보간법, v-once, v-html, v-bind)

텍스트 보간법

데이터 바인딩의 가장 기본형태인 콧수염 괄호를 사용하는것 입니다.

• 콧수염괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message 값으로 대체 됩니다.
• message 속성이 변경될 때 마다 갱신됩니다.

---

v-once 

데이터가 변경되어도 갱신(반응)되지 않는 일회성 보간을 수행할 수 있다.

<p v-once> 문자열 : {{ message }} </p>

 

---

v-html

html을 출력하려면 v-html 디렉티브를 사용해야 합니다

<h2> 텍스트 : {{ rawHtml }} </h2>
<h2> v-html : <span v-html="rawHtml"></span> </h2>

 

웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 쉽게 이어질수 있고

이는 위험할 소지가 있습니다. html 보간법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고

사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다.

 

XSS 취약점 : 웹사이트에서 악성 스크립트를 삽입할 수 있는 취약점

 

---

v-bind (속성 바인딩)

콧수염괄호는 HTML 속성에 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용합니다.

<div v-bind:title="dynamicTitle"> 마우스를 올려보세요. </div>

// v-bind 단축
<div :title="dynamicTitle"> 마우스를 올려보세요. </div>
<input type="text" value="홍길동" :disavled="isInputDisabled" />
<input v-bind="attrs" />

// script
const attrs = ref({
 type : 'text',
 value : '12345678'
 disalbed : false,
 });

---

콧수염괄호 안에서는 자바스크립트 표현식도 사용 가능합니다.