Template Syntax

텍스트 보간법

데이터 바인딩

데이터 바인딩의 가장 기본형태는 {{ data }}를 사용하는 것이다.

{{ }} 안에는 data뿐만 아니라 JavaScript 표현식도 사용 가능하다.

{{ message }}와 같이 사용하면 컴포넌트 인스턴스의 message 값으로 대체된다.

message 속성이 변경될 때마다 갱신된다.

 

 

v-once

한 번만 렌더링을 하고 데이터가 변경되어도 갱신되지 않게하기 위해 사용한다.

일회성 보간을 수행한다.

예시

 

 

두 데이터 바인딩의 차이

예시

⬇️⬇️ 실행 결과 ⬇️⬇️

 

 

v-html

v-html 디렉티브를 이용하여 실제 HTML로 출력할 수 있다.

웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 이어질 수 있어서 신뢰할 수 있는 콘텐츠에서만 사용하여야 한다.

예시

⬇️⬇️ 실행 결과 ⬇️⬇️

 

 

v-bind

{{ }}는 HTML 속성에 사용할 수 없기 때문에 {{ }} 대신 사용한다.

:는 v-bind의 단축 문법이다.

예시

⬇️⬇️ 실행 결과 ⬇️⬇️

 

예시: 단축 문법 사용하기

 

예시: 다중 속성 한까번에 바인딩하기

⬇️⬇️ 실행 결과 ⬇️⬇️