📍v-bind directive
- mustaches 문법({{ }})은 오직 tex를 표시하기 위해 사용한다
- 동적인 값을 어트리뷰트로 바인딩하기 위해서 v-bind directive를 사용한다
<div v-bind:id="dynamicId"></div>
<!-- React에서 아래와 동일 -->
<div id={dynamicId}></div>
- directive는 v- 접두사로 시작하는 특별한 어트리뷰트이다
- directive 값은 컴포넌트의 state에 접근할 수 있는 JS 표현식이다
- 위 예시에서 :id는 directive의 인자에 해당하며, 컴포넌트의 상태에서 dynamicId 프로퍼티에 동기화된다
- v-bind는 자주 사용되므로 아래와 같은 단축된 문법을 갖는다
<div :id="dynamicId"></div>
<!-- React에서 아래와 동일 -->
<div id={dynamicId}></div>