Vue.js 디렉티브(v-text, v-html)

<div id="simple">
	<h2>{{message}}</h2>
</div>

 

1. 템플릿 표현식(콧수염 표현식 : Mustache Expression)

   - HTML DOM에 데이터를 렌더링

   - 콧수염 표현식이라 부르며 또는 보간법이라고 불림

 

<div id="simple">
	<h2 v-text="message"></h2>
</div>

 2. v-bind 디렉티브

   - innerText 속성에 연결

   - HTML을 인코딩하여 화면에는 태그 문자열이 그대로 출력

<div id="simple">
	<h2 v-html="message"></h2>
</div>

3. v-html 디렉티브

   - innerText가 아닌 innerHTML 속성에 연결

   - HTML을 파싱하여 화면에 출력

  * v-html 단점 : XSS(Cross Site Scripting) 공격 등에 취약함

XSS 공격 : input 등을 이용하여 스크립트 코드를 그대로 바인딩하여 실행하는 공격