반응형
텍스트 보간법
데이터 바인딩의 가장 기본형태인 콧수염 괄호를 사용하는것 입니다.
- 콧수염괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 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,
});
콧수염괄호 안에서는 자바스크립트 표현식도 사용 가능합니다.
반응형
'vue.js > Vue3 - 기본편' 카테고리의 다른 글
8. computed (0) | 2024.01.21 |
---|---|
7. 반응형 기초 (reactive, ref, toRefs, toRef, readonly) (0) | 2024.01.18 |
5. setup() (0) | 2024.01.14 |
4. Composition API (0) | 2024.01.14 |
3. Options API VS Composition API (0) | 2024.01.14 |