텍스트 보관법
중괄호 문법
셋업에서 리턴된 값이, 중괄호 문법으로 바인딩 되어서 템플릿안에 넣을 수 있다.
현재 문법에서는 message는 값이 변경될 때마다, 동기화 된다.
디렉티브 문법
v-once 디렉티브
v-once 디렉티브 속성을 사용하면,
데이터가 변경되어도 갱신되지 않는 일회성 보관을 할 수 있다.
•
예제 코드 작성
<template>
<div>
<h2>보관법</h2>
<p>{{ message }}</p>
<p v-once>{{ message }}</p>
<button @click="message = message + '!'">Click!</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('안녕하세요!');
return {
message,
};
},
};
</script>
<style lang="scss" scoped></style>
JavaScript
복사
한 message는 반응형으로 설정하고,
다른 message는 디렉티브를 사용해서 한 번만 로드되도록 v-once 를 사용해보자.
•
확인
이렇게 v-once가 적용된 곳은 한번만 로드되고 변경되지 않는 것을 확인할 수 있다.
HTML ( v-html )
이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석한다. 실제 HTML을 출력하고 싶다면 v-html 디렉티브를 사용해야한다.
•
코드 예제 작성
v-html을 사용하면 중괄호를 사용하지말고 디렉티브에 바인딩해주면 해당 태그 내부로 선언된 값이 들어간다.
•
확인
이렇게 p태그 내부에 strong 태그가 들어갔다.
•
주의할 점
웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점에 노출될 가능성이 크다. 그래서 HTML 보관법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고, 사용자가 제공한 콘텐츠에서는 절대 사용하면 안된다.
속성 바인딩 (v-bind)
이중 중괄호는 HTML 속성에서 사용할 수 없다, 하지만 v-bind 디렉티브를 사용하면 된다.
•
속성의 작동 모습
이렇게 태그 내부에 속성은 중괄호를 사용할 수 없다.
속성은 이렇게 추가 정보를 나타내는데 용이한 특징이다.
•
속성을 바인딩 할려면???
이렇게 v-bind:속성=”바인딩 함수” 를 태그에 넣어서 사용가능 하다.
속성이 바뀐것을 확인할 수 있다.
•
boolean속성 넣어보기
v-bind:disabled 로 함수와 바인딩을 할수 있다. disabled이지만, false를 넣어서 활성화 시켜보자.
disabled가 false라서 화면에 나타나지 않았고, input필드 또한 입력이 가능하다.
속성 바인딩 단축 문법
속성에 v-bind를 넣었지만, 이는 :으로도 속성바인딩을 사용할 수 있다.
•
확인
그대로 잘 작동함
다중 속성 바인딩 하기
attrs에 속성을 객체로 리턴할 수 있다.
•
확인
이렇게 속성으로 비밀번호 구간이 생성이 되었다.
자바스크립트 넣기
중괄호 문법에는 자바스크립트도 표현이 가능하다. 다 넣을 수 있다.
예제 코드 작성
중괄호 내부에 자바스크립트를 그대로 넣을 수 있고, 삼항연산자도 넣을 수 있다.
이렇게 잘 표현이 된다.