Vue 데이터 바인딩 보간법 v-bind

Vue 에서 보간법을 이용하고 데이터 바인딩 할 수 있고

v-bind를 이용해서 속성을 사용할 수 있습니다.

const App = {
  data() {
    return {
      name: '파워쿠의 블로그',
      address: 'https://powerku.tistory.com/'
    }
  }
}

Vue 컴포넌트 옵션의 데이터들을 어떻게 사용하는지 알아보겠습니다.

 

보간법

Vue 템플릿 문법 입니다. 중괄호를 두 개를 사용합니다.

{{ name }}

v-bind

attribute 속성을 사용할때는 v-bind 보간을 사용해야합니다.

줄여서 :도 사용 가능합니다.

v-bind:href="address"

 

사용 예시

<div id="app">
  <p>{{ name }}</p>
  <a v-bind:href="address">이동하기</a>
</div>

위에서 정의한 name, address 데이터 들을 보간법을 이용하여 바인딩 할 수 있습니다.

See the Pen Untitled by powerku (@powerku) on CodePen.