v-bind 디렉티브
v-bind는 Vue.js에서 HTML 요소의 속성에 데이터를 바인딩할 때 사용하는 디렉티브입니다. 즉, 데이터와 HTML 속성을 동적으로 연결하여 업데이트를 쉽게 반영할 수 있게 해줍니다. 예를 들어, 이미지의 src 속성이나 링크의 href와 같은 HTML 속성들을 Vue 인스턴스의 데이터와 동기화하는데 주로 사용됩니다.
주요 특징:
- 데이터 바인딩: HTML 속성을 Vue 인스턴스의 데이터와 동기화하여 동적으로 업데이트됩니다.
- 축약형 사용 가능:
v-bind는:로 축약하여 사용할 수 있습니다. - 반응형: Vue의 반응형 시스템 덕분에 바인딩된 데이터가 변경되면 자동으로 DOM에 반영됩니다.
사용 예시:
이미지 경로 바인딩:
<img v-bind:src="imageSrc" alt="이미지" />
위 코드에서 imageSrc는 Vue 인스턴스 내의 데이터로, 동적으로 이미지 경로가 바뀔 수 있습니다. 여기서 v-bind:src는 HTML 속성 src를 imageSrc 데이터에 바인딩한 것입니다.
위 코드는 축약형으로 다음과 같이 쓸 수 있습니다:
<img :src="imageSrc" alt="이미지" />
클래스나 스타일 바인딩:
<div v-bind:class="{ active: isActive }"></div>
이 코드는 isActive가 true일 경우 해당 <div> 요소에 active 클래스를 동적으로 추가합니다.
여러 속성 바인딩:
v-bind는 객체 형태로 여러 개의 속성을 한 번에 바인딩할 수도 있습니다.
<a v-bind="{ href: url, target: '_blank' }">링크</a>
위 코드에서 href 속성은 url 데이터에 바인딩되고, target 속성은 _blank로 고정되어 새 창에서 링크가 열리게 됩니다.
요약
v-bind는 HTML 속성에 Vue 데이터를 동적으로 연결하는 디렉티브로, 주로 데이터 바인딩과 동적 속성 업데이트를 간편하게 처리하는 데 사용됩니다. 단순히 데이터를 표시하는 것뿐 아니라, 스타일, 클래스, 속성 값 등에 바인딩하여 동적인 사용자 인터페이스를 구현할 수 있습니다.
넙-죽