vue introduction - event handling | 풀스택개발 EastFlag

페이지 목차

event handling 이란?

앞에서 모델 데이터를 뷰에 바인딩하는 expression 문법과 모델 데이터를 html 속성에 바인딩하는 v-on:속성 혹은 :속성 문법을 배웠다.

이 문법은 모델 데이터를 뷰에 바인딩하는 문법이였다면 이벤트 핸들링은 방향이 반대이다. 뷰에서 모델 데이터로 들어온다. 템플릿 문법은 v-on:이벤트 혹은 줄여서 @이벤트이다.

예를 들어 자바스크립트의 onclick 이벤트는 v-on:click 혹은 줄여서 @click 으로 표현된다.

클릭 이벤트

Add to cart 버튼에 클릭 이벤트 바인딩을 해보자. v-on:click=”cart += 1″ 을 적용해보고 테스트 해보자.

그 다음에 methods라는 속성을 추가하고 addToCart 키에 function() {} 을 추가한다. addToCart: function() {} 이 부분이 es6 method definition으로 addToCart() {} 로 바뀌게 된다.

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral'],
    variants: [
      {
        variantId: 2234,
        variantColor: 'green',
        variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'
      },
      {
        variantId: 2235,
        variantColor: 'blue',
        variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-blue-onWhite.jpg'
      }
    ],
    cart: 0
  },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

var app = new Vue({

el: '#app',

data: {

product: 'Socks',

image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',

inStock: true,

details: ['80% cotton', '20% polyester', 'Gender-neutral'],

variants: [

{

variantId: 2234,

variantColor: 'green',

variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'

{

variantId: 2235,

variantColor: 'blue',

variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-blue-onWhite.jpg'

}

cart: 0

methods: {

addToCart() {

this.cart += 1

}

})

버튼과 cart라는 클래스명의 div를 추가한다.

<div id="app">
  
  <div class="product">
        
    <div class="product-image">
      <img :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.variantId">
        <p>{{ variant.variantColor }}</p>
      </div>

      <button v-on:click="addToCart">Add to cart</button>

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

    </div>
    
  </div>
  
</div>

</div>

<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>

<p>{{ variant.variantColor }}</p>

</div>

</div>

실행하고 버튼 클릭시 카트 수량이 증가함을 확인하자.

마우스 이벤트

이번에는 green과 blue에 마우스를 올리면 sock 색깔이 각각 green 과 blue로 바뀌도록 해보자.

variants에 variantImage 키값을 각각 추가한다. 그리고, updateProduct 함수도 추가한다.

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral'],
    variants: [
      {
        variantId: 2234,
        variantColor: 'green',
        variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'
      },
      {
        variantId: 2235,
        variantColor: 'blue',
        variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-blue-onWhite.jpg'
      }
    ],
    cart: 0
  },
  methods: {
    addToCart() {
      this.cart += 1
    },
    updateProduct(variantImage) {
      this.image = variantImage
    }
  }
})

var app = new Vue({

el: '#app',

data: {

product: 'Socks',

image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',

inStock: true,

details: ['80% cotton', '20% polyester', 'Gender-neutral'],

variants: [

{

variantId: 2234,

variantColor: 'green',

variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'

{

variantId: 2235,

variantColor: 'blue',

variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-blue-onWhite.jpg'

}

cart: 0

methods: {

addToCart() {

this.cart += 1

updateProduct(variantImage) {

this.image = variantImage

}

})

p 태그에 마우스오버 이벤트를 추가한다. v-on:mouseover 대신 @mouseover라고 간단히 사용할 수 있다.

<div id="app">
...  

      <div v-for="variant in variants" :key="variant.variantId">
        <p @mouseover="updateProduct(variant.variantImage)">{{ variant.variantColor }}</p>
      </div>

      <button v-on:click="addToCart">Add to cart</button>
...
</div>

...

<p @mouseover="updateProduct(variant.variantImage)">{{ variant.variantColor }}</p>

</div>

...

</div>

+ todo

catr의 값을 1 감소시키는 버튼과 메서드를 각각 추가하시오.

증가하는 함수와 감소하는 함수를 하나로 합치는 리팩토링을 해보자.

See the Pen Challenge 5 – Intro to Vue by Gregg Pollack (@GreggPollack) on CodePen.0