Vue:데이터바인딩

개요

Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다.한글도 된다.

HTML 속성에 대해선 다른 문법을 쓴다.

:속성명='이름' 형태로 바인딩 할 수 있다.

이외 id, class 등에 대해 바인딩이 가능하다. id에 null, undefined가 오면 해당 요소는 눈에 보이지 않게 된다.

<div v-bind:id="변수"></div> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)

변수 안에 <span style="color: red">를 담아 {{변수}}라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)

이런 제한을 풀기 위해선 <p>Using v-html directive: <span v-html="변수"></span></p> 형태로 써야 한다.