뷰 이벤트 (Vue Event)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 이벤트 (Vue Event)

웹 어플리케이션에서 사용자가 동적으로 웹 어플리케이션과 상호작용을 할 수 있도록 하는 기능을 의미합니다.

뷰 이벤트는 크게 3가지 역할로 구성되어 있습니다.

• 이벤트 소스 (Event Source): 이벤트가 발생한 객체
• 이벤트 핸들러 (Event Handler): 이벤트 처리 내용이 구현된 객체
• 리스너 (Listener): 이벤트 소스와 이벤트 핸들러를 연결하는 함수

 

사용 속성 및 디렉티브

• v-on: 이벤트 리스너로 이벤트를 감지하고 이벤트 시그널을 처리 함수(methods)를 호출하는 디렉티브
• methods: 이벤트 핸들러를 구현하는 곳으로 Javascript의 function을 구현할 수 있도록 지정하는 속성

 

형식

...
// ★ 참조: 입력 이벤트를 감지 및 시그널 전송부
<button v-on:click="clickBtn">이벤트</button>   
<button v-on:click="clickParamBtn(10)">이벤트와 매개변수</button>
<button v-on:click="clickEventBtn">이벤트와 이벤트 전달</button>
...

<script>
    ...
    methods: { // ★ 참조: 입력 시그널 수신부
        clickBtn: function() {   
            alert('clicked');   // ★ 참조: 입력 시그널 수신 결과 처리부
        },
        clickParamBtn: function(num) {
        	alert('clicked ' + num + ' times');
        },
        clickEventBtn: function(event) {
        	console.log(event);
        }
    }
    ...
</script>

 

사용 예시

Plus와 Minus 버튼을 만들어 화면에 표시되는 값을 +1 혹은 -1하는 이벤트 처리를 구현합니다.

<template>
    <h1> Vue Event </h1>
    
    <button v-on:click="clickPlusBtn">Plus</button>
    <button v-on:click="clickMinusBtn">Minus</button>

    <div>
      {{ num }}
    </div>
</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      num:0,
    };
  },
  methods: {
    clickPlusBtn: function() {
      this.num += 1;
      console.log('Plus one');
    },
    clickMinusBtn: function() {
      this.num -= 1;
      console.log('Minus one');
    }    
  }
};
</script>

<style>
</style>

 

결과

기본 경로인 'http://localhost:8080'로 접근합니다.

Plus 버튼과 Minus 버튼이 각각 표시되며, data에 선언한 num의 초기값인 0이 표시되고 있습니다.

콘솔 영역에도 어떠한 로그도 표시되고 있지 않습니다.

Plus 버튼을 2번 클릭하여 num의 값을 2로 만든 상태입니다.

콘솔 영역에는 Plus one이 2번 표시되었음을 확인할 수 있습니다.

다시 Minus 버튼을 1번 클릭하여 num에 표시된 값이 1이 되었음을 확인할 수 있습니다.

콘솔 영역에는 Minus one이 1번 새롭게 표시되는 것을 확인할 수 있습니다.

 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue