[Vue/코딩애플/part1] 3. 이벤트 핸들러로 click 감지하기

어떤 HTML 요소를 클릭했을 때 이벤트를 발생시키려면,

<div onclick=""> 에서 "" 안에 자바스크립트를 넣는다.

Vue에서는 이와 비슷하게

 

@click="" 

 

을 이용한다.

 

실습하기 위해 [허위매물신고]란 버튼을 만들자

 

버튼을 누르면 신고 수가 1이 증가하는 기능을 만들어보자

 

일단 신고수 : 0 에서 0을 변수로 만들어야 한다는 것을 알 수 있다.

데이터 보관소에서 변수로 등록 ㄱㄱ!

count 라고 변수명을 지었다. 신고 전이니 0으로 초기화하자.

 

data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : 0,
    }
  },

 

이제 허위매물신고 버튼에 click 이벤트를 집어넣자.

문법은

@click="{실행코드}"

 

이다.

클릭 할 때마다 count 가 1씩 증가해야하니 실행코드에는 count++ 를 넣자

그리고 데이터바인딩은 {{데이터이름}} 형식으로 한다고 했다.

<button @click="count++">허위매물신고</button><br>

 

그러면 최종적으로 다음과 같이 된다.

 

<template>
  <!-- 상단 메뉴 -->
  <div class="menu">
    <a v-for="a in menu" :key="a">{{a}}</a> <!-- Home 3개 출력 -->
  </div>
  <!-- // 상단 메뉴 끝 -->
  <div>
    <h4>{{products[0]}}</h4>
    <p>10만원</p>
    <button @click="count++">허위매물신고</button><br>
    <span>신고수 : {{count}}</span>
  </div>
  <!--<div>-->
  <!--  <h4>{{products[1]}}</h4>-->
  <!--  <p>20만원</p>-->
  <!--</div>-->
  <!--<div>-->
  <!--  <h4>{{products[2]}}</h4>-->
  <!--  <p>30만원</p>-->
  <!--</div>-->
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : 0,
    }
  },
  components: {
  }
}
</script>

 

버튼을 누를 때마다 카운팅이 되는 것을 확인할 수 있다.

 

 

클릭했을 때 실행되는 이벤트를 함수로 만들고 싶다면?

script 로 가서 methods 라는 항목을 만들자. s를 꼭 붙이자

<script>
export default {
  name: 'App',
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : 0,
    }
  },
  methods: {

  },
  components: {

  }
}
</script>

 

이제 methods 안에 함수를 넣으면 된다.

클릭할 때 count 가 1 증가하는 것을 함수명 increase로 만들어보자

increase라는 함수를 만들어서 함수가 실행되면 count++ 가 되게 해야징. 하고 코드 작성하면 에러가 난다

 

데이터보관함에 있는 데이터를 꺼내 쓸 때는 this.count 라고 꼭 써야한다.

 

함수를 정의했으니 다시 위로 올라가서 함수 실행을 시켜주자

 

@click="increase" <= "{함수이름}" 큰따옴표 안에 함수이름을 넣으면된다.

여기서, increase도 되고 increase() 도 된다

 

기존 3개의 상품에 각각 허위매물신고 버튼을 만들고, 이벤트까지 붙인 코드는 다음과 같다.

<template>
  <!-- 상단 메뉴 -->
  <div class="menu">
    <a v-for="a in menu" :key="a">{{a}}</a> <!-- Home 3개 출력 -->
  </div>
  <!-- // 상단 메뉴 끝 -->
  <div v-for="(a,i) in products" :key="i">
    <h4>{{a}}</h4>
    <p>10만원</p>
    <button @click="increase(i)">허위매물신고</button><br>
    <span>신고수 : {{count[i]}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0],
    }
  },
  methods: {
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    }
  },
  components: {

  }
}
</script>

 

 

 

이제 클릭 이벤트를 배웠으니 다른 이벤트가 필요하면 구글링해서 해보장 (더블클릭, 마우스오버 등등이 있을 것 같다)