Vue Tutorial 따라하기 - Event Handling

Programming/FrontEnd

by Dal_pang 2022. 10. 13. 04:11

이번 튜토리얼을 끝내면 다음과 같이 이벤트를 처리할 수 있는 버튼을 생성할 수 있다.

깃헙에서 L6-start 브랜치를 체크아웃하면 index.html 파일에서 다음 코드를 확인할 수 있다.

<div class="cart">Cart({{ cart }})</div>

...

<button class="button">Add to Cart</button>

index.html 파일의 cart변수는 main.js의 cart 속성을 출력하게 된다.

소스코드에는 app이 return하는 객체 내부에 cart 속성으로 지정되어 있음.

이벤트 리스닝 속성 추가

button 태그가 이벤트를 인식할 수 있도록 하기 위해 vue는 v-on속성을 제공한다.

위의 사진을 보면, v-on속성 뒤에 ':'콜론과 함께 어떤 이벤트를 리스닝해야 하는지 지정해주고,

그 값으로 어떤 행위가 수행되어야 하는지 지정해 줄 수 있다.

하지만 보통 수행되어야 하는 expression이 "cart+=1"보다 복잡한 경우가 많기 때문에

app에 메소드를 생성하여 수행되어야 할 작업내용을 작성해 사용하는 경우가 더 많다.

소스코드 확인하기

main.js 소스코드

const app = Vue.createApp({
    data() {
        return {
            ...
        },
        methods ={
            addToCart() {
                this.cart += 1
            }
        }
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
  ...
  <body>
    <div id="app">
      ...
      <div class="cart">Cart({{ cart }})</div>
      ...
            <button class="button" v-on:click="addToCart">Add to Cart</button>
      ...
        </div>
      </div>
    </div>

    ...
  </body>
</html>

이제 버튼에 클릭 이벤트가 발생되면 addToCart 메서드가 실행되게 된다.

v-on 속성을 짧게 사용하는 방법 => '@'

v-on:click="addToCart"

@click="addToCart"

위 두 라인의 코드는 동일하게 작동한다.

다른 이벤트 설정

click 이벤트가 아닌 다른 이벤트를 설정해보자.

우리가 출력해놓은 color속성에 사용자가 mouseover를 할 경우 해당 색상의 이미지가 출력되게끔 수정.

index.html의 다음 라인에 이벤트리스닝 속성을 추가해준다.

<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

추가된 코드라인.

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

main.js파일에 해당 메소드를 추가한다.

methods: {
    addToCart() {
        this.cart += 1
    },
    updateImage(variantImage){
        this.image=variantImage
    }

}

색상이 출력될때, 출력된 green, blue는 v-for속성을 통해 각자의 variant라는 리스트 내 원소 정보를 갖고 있다.

때문에, 이벤트리스닝 설정 시 실행될 메서드의 매개변수로 variant.image를 입력해주면,

해당되는 variant원소에서 우리가 필요한 값들을 사용해 줄 수 있다.

여기까지 완료 후 실행해보면,

green에 mouseover시에는 초록색 양말 사진이, blue에 mouseover 하면 파란 양말 사진이 출력되는 것을 확인할 수 있다.

실행 영상

728x90

'Programming Languages > FrontEnd' 카테고리의 다른 글

Vue Tutorial 따라하기 - Computed Properties (0)	2022.11.10
Vue Tutorial 따라하기 - Class&Style Binding (0)	2022.10.15
Vue Tutorial 따라하기 - List Rendering (0)	2022.10.13
Vue Tutorial 따라하기 - Conditional Rendering (0)	2022.09.29
Vue Tutorial 따라하기 - Attribute Binding (0)	2022.09.29