6강: Event Handling

yuriring·2023년 4월 7일

VueMastery

목록 보기

5/6

강의 목표:
1. Event handler를 통해 'Add to cart' 버튼을 누르면 우측 상단 'cart( )'버튼의 숫자가 더해질 수 있도록 만들고 작동시키기.
2. Mouseover Events를 이용하여 양말의 색을 바꾼다.

element에 클릭이벤트 수신하기

1. index.html에 cart와 장바구니 버튼, main.js에 cart 데이터를 만든다.

//index.html
<div class="cart"> Cart {{ cart }} </div>
...
<button class="button"> Add to Cart </button>

//main.js
data(){
  return{
    cart: 0,
    ..
  }
}

2. button에 v-on directive를 사용한다.

main.js 에 이벤트를 위한 method를 만든다.
method를 따로 추가하는 이유 : v-on:click = 'cart += 1 만 추가해도 카트의 숫자가 올라지만 더 복잡한 이벤트가 발생할 때를 대비해서 method를 만들었다.

v-on

element에 이벤트리스너를 붙인다.

//syntax
<button v-on:click="메서드명"></button>
//shorthand
<button @click="메서드명"></button>

//index.html
<button class="button" v-on:click="addToCart"> Add to Cart </button>


//main.js
  methods: {
    addToCart() {
      this.cart = +1;
    },
  },

v-on 이해하기

method의 `this.cart`가 Vue instance's data 안의 cart에 적용되었다.

Mouseover Events

'green', 'blue' 글씨에 hover ( Vue에서 hover는 mouseover ) 를 하면 양말 그림이 해당 색에 맞게 바뀌도록 한다.

1. main.js에 new variant image paths를 추가한다.

//main.js
data() {
  return{
    ...
    variants: [
      { id: 2234, color:'green', image:'./assets/images/socks_blue.jpg' },
      { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
    ]
  }
}

2.mouseover에 연결할 메서드명 만들기 updateImage

//index.html
<div v-for="variant in variants" :key="variant.id" @mouseover="updataImage(variant.image)">{{ variant.color }}</div>

3. main.js에 updateImage 함수를 추가한다.

updataImage에 parameter variantImage를 넣어주는것 잊지말자.

//main.js
methods:{
  ...
  updateImage(variantImage){
    this.image = variantImage
}

결과

code challenge

Create a new button that decrements the value of cart.

code challenge answer

//index.html
<!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="cart">Cart({{ cart }})</div>
      
      <div class="product-display">
        <div class="product-container">
          <div class="product-image">
            <img v-bind:src="image">
          </div>
          <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock</p>
            <p v-else>Out of Stock</p>
            <ul>
              <li v-for="detail in details">{{ detail }}</li>
            </ul>
            <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
            <button class="button" v-on:click="addToCart">Add to Cart</button>
            <button class="button" v-on:click="removeFromCart">Remove Item</button>
          </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 {
      cart: 0,
      product: "Socks",
      image: "./assets/images/socks_blue.jpg",
      inStock: true,
      details: ["50% cotton", "30% wool", "20% polyester"],
      variants: [
        { id: 2234, color: "green", image: "./assets/images/socks_green.jpg" },
        { id: 2235, color: "blue", image: "./assets/images/socks_blue.jpg" },
      ],
    };
  },
  methods: {
    addToCart() {
      this.cart += 1;
    },
    removeFromCart() {
      if (this.cart >= 1) {
        this.cart -= 1;
      }
    },
    updateImage(variantImage) {
      this.image = variantImage;
    },
  },
});

yuriring

FE 개발자가 되기 위해 달리고 있어요 🏃‍♀️

이전 포스트

5강: List rendering

다음 포스트