04. 텍스트 보간법, v-html, v-bind

vue에서 데이터를 DOM에 바인딩 하는 방법으로는 텍스트 보간법, v-html, v-bind 등이 있다.

 

간단하게 요약을 해보자면

1. {{ }} - 텍스트 보간법: 바인딩 된 데이터를 텍스트로 렌더링해줌

2. v-html: 바인딩 된 데이터를 html요소로 반환해줌 (innerHTML과 동일한 기능이라 생각)

3. v-bind: html 속성에 데이터를 바인딩할 때 사용

 

해당 내용을 코드로 한번씩 비교를 해보자면 다음과 같다.

1. 텍스트 보간법

export default 내부의 data의 htmlTest에 <h1>h1 test</h1>을 선언한 후 DOM 요소에 텍스트 보간법과 v-html요소를 하나씩 만들었다

 

해당 코드가 렌더링 되면 다음과 같다.

위-텍스트 보간법, 아래- v-html

텍스트 보간법으로 선언한 부분은 해당 요소가 텍스트로 (innerTEXT처럼) 렌더링이 되었고, 아래에 v-html으로 만든 부분은 h1태그가 정상적으로 적용이되서 렌더링 된 것을 확인할 수 있다.

 

따라서 문자열 같은 경우를 렌더링하게 될때는 텍스트 보간법, html 요소를 렌더링 할 때는 v-html을 사용하면 된다.

 

2. v-bind

텍스트 보간법 {{ }} 은 html 속성 내부에서 사용할 수 없다는 단점이 있기 때문에 이때 사용하는 것이 v-bind다.

vbindTest라는 데이터 변수에는 렌더링 이라는 값이 선언되어서 input 태그의 value 속성에 값을 넣으려고 했다.

첫번째 input의 value값에는 {{}}를 사용한 DOM, 두번째 input에는 v-bind를 사용해서 value값을 넣었다.

 

첫번째 사진 처럼 value값에 {{ }}를 사용하면 문자열 그대로 들어가는 것을 확인할 수 있고, 두번째 요소에는 value 값이 data 내부에서 선언한 렌더링 이라는 값이 그대로 들어가는 것을 확인할 수 있다.

 

v-bind 같은 경우는 상당히 많이 사용돼서 :로 축약할 수 가 있다.

그러므로 방금 코드를 축약해서 다시 표현하면 다음과 같다.

 

<input type="text" :value=vbintTest"/>

v-bind에서 : 다음에 오는 것은 html속성에 바인딩을 할 수 있다는 것을 알 수 있다.