3강: attibute binding

yuriring·2023년 4월 7일

VueMastery

목록 보기

2/6

강의 목표: 2강에서 만든 product 옆에 양말 이미지를 추가한다.

How do we bind src to image in vue?

v-bind directive를 이용한다.

v-bind

HTML 요소의 속성과 Vue 앱의 데이터 값 사이에 연결을 만들기 위해 사용되는 Vue directive
//문법
<html 태그 v-bind:속성="표현식">
//shorthand
<html 태그 :속성="표현식"> 

1. index.html에 product-image 클래스를 만든다.

//index.html

<div class="product-image">
  //이미지 아직 삽입 안했음
</div>

2. data에 image 추가 후 index.html에 경로 연결

//main.js

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

//index.html

<div class="product-image">
  <img src="image">
</div>

3. v-bind를 이용하여 src 속성을 이미지 데이터에 바인딩하기

//index.html

<div class="product-image">
  <img v-bind:src="image"> //image와 src 사이에 'v-bind:' 추가
</div>

결과

v-bind

v-bind는 속성을 표현식에 동적으로 바인딩함.
위 코드에서 속성은 src 표현은 image였다.

`v-bind`는 여러가지 방법으로 사용 가능하다.

<img :src=:"image">
<img :alt=:description">
<a :hret="url">
<div :class="isActive">
<span :style="isActive">
<span :disabled="isDisabled">

code challenge
1. Add a url to the data objet.
2. Use v-bind to bind the url to an anchor tag's href attribute.

code challenge 답 ( 이미지를 클릭하면 naver로 연결했다. )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="nav-bar"></div>
      
      <div class="product-display">
        <div class="product-container">
          <div class="product-image">
            <!-- image goes here -->
            <a :href="url">
              <img v-bind:src="image"> 
            </a>          
          </div>
          <div class="product-info">
            <h1>{{ product }}</h1>
          </div>
        </div>
      </div>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

//main.js
const app = Vue.createApp({
  data() {
    return {
      product: "Socks",
      image: "./assets/images/socks_green.jpg",
      url: "https://www.naver.com",
    };
  },
});