vue.js - 템플릿 문법 - Interpolations
템플릿 문법의 종류
- Interpolations
- Directive
- Component Tag
Interpolations(보간법) 이란
- html문법에서 script태그 안쪽이 아닌 부분에서도 중괄호 두 개를 이용하여 javascript를 쓸 수 있게하는 문법
- 예시)
<p></p>
Interpolations의 범위
- 예시
<div id="app">
<p> hello world </p>
<p class=""> hello world </p>
<p > hello world </p>
</div>
-
실행결과
- warning으로 class에 interpolations을 사용하지 말라고 함, 대신 v-bind 또는 콜론을 사용하라고 함
- 태그에 interpolations을 사용하면, 제대로된 html문법이 아니라고 하여 javascript수행이 중단 됨.
- vue 인스턴스가 유효하면서 태그에 영향을 미치지 않는 곳에서만 사용 가능
또한, interpolations에서 간단한 javascript코드를 사용할 수 있다. 하지만 다음과 같은 경우는 피해야 한다.
- if문 사용 금지, 3항 연산자로 대체해서 표현
- 복잡하고 긴 문법은 사용을 권장하지 않음, 메소스 작성 후 호출로 표현
한 가지더,
- Vue.js에서 interpolations안의 문자열은 그대로 출력하기 때문에 내부의 태그를 집어 넣는등으로 조작할 수 없다.
- 보안 상의 이유로 태그가 그대로 문자열로 출력된다.
- 만약, 태그를 적용하여 출력하고 싶은 경우에는 v-html과 같은 directive를 사용해야 한다.
예시)
<div id="app">
<p v-html='str'><p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {str: '문자를 <strong>굵게</strong> 또는 <em>기울</em>이고 싶으면 이렇게 해야합니다.'}
})
</script>
하지만, 웹사이트에서 HTML을 동적으로 렌더링하면 XSS(크로스 사이드 스크립트)취약점으로 쉽게 이어질 수 있어서 위험하다. 따라서, 신뢰하는 컨텐츠에서만 사용하고, 사용자가 조작할 수 있는 컨텐츠에는 사용해서는 안된다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고