Vue Mastery - Intro to Vue 3 #2 Attribute Binding

이미지 넣기

    <div id="app">
      <div class="product-display">
        <div class="product-container">
          <div class="product-image">
            <!-- image goes here! -->
          </div>
          <div class="product-info">
            <h1>{{ product }}</h1>
          </div>
        </div>
      </div>
    </div>
...

기존의 내용에서 이미지 넣을 공간을 확보

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_green.jpg'
        }
    }
});

이미지 주소를 그냥 상대경로로 작성함

vue를 이용해 이미지 바인드하기

  <div class="product-image">
    <!-- image goes here! -->
    <img v-bind:src="image">
  </div>

• v-bind:xx라는 디렉티브(v-bind directive)를 이용하면 data()에서 반환하는 JSON의 image 정보를 가져올 수 있음

how v-bind works

• v-bind: Dynamically bind an attribute to an expression.

동적으로 애트리뷰트를 표현식에 바인드 시키는 것이라고 한다. 여기서 attribute는 src에 해당하는 것이고, expression은 "image"에 해당하는 것이다.

이전에 DOM에서 {{image}}처럼 쓰던 것과 같은 것이다.

v-bind의 생략

• v-bind:는 너무 많이 쓰는 애트리뷰트라 그냥 :로 줄이기도 한다.
  • :src="image"로 해도 같은 결과가 나온다.

v-bind의 종류

• :src
• :alt
• :href
• :class
• :style
• :disabled

위와 같이 엄청 여러 개가 있다. 만일, HTML 애트리뷰트를 사용하는데 있는지 궁금하면 찾아봤을 때 거의 있을 것 같다.

정리

Vue 앱 내부 data()에 있는 정보를 HTML 애트리뷰트와 연결시키려면 v-bind:xxx 혹은 :xxx와 같은 방식으로 데이터를 바인딩시키면 된다.