Vue 메소드 정의 및 이벤트 핸들러

**메소드란?

어떤 특정 작업을 수행하기 위한 명령문의 집합이라 할 수 있다.

 

보통 function abc ( ){ } 형태를 함수, 함수 선언문이라고 한다.

이 때 Class, Json 등 안에 함수 형태로 선언되어 있는 것을 '메소드'라고 부른다.

(즉, 어딘가에 속해 있는 함수 라고 보면 됨)

 

예시1)

let object = {

     test ( ) { }

}

예시2)

class testClass {

    test ( ) { }

}

 

 

*Vue에서 메소드 정의하기

 : 보통 methods json 안에 선언해 준다.

<script>
	let app=new Vue({
    	el: '#app',
        data(){
        	return{};
        },
        methods:{
        	add(){
            
            }
        }
    })
</script>

 ** 이 때, 화살표 함수를 사용하면 안좋다.

methods를 구현하다보면 data에 접근해야 하는 경우가 많은데,

화살표 함수는 this를 바인딩하지 않으므로, this가 vue 객체(new Vue)로 바뀌지 않는다.

 

*event 접근하는 법

1) v-on: 속성 사용하기

v-on:click 속성을 추가하면 "" 따옴표 내부는 javascript 형식으로 사용할 수 있게 된다.

counter ++ 값 => click 시 counter data값이 1씩 증가한다는 뜻이다.

 

  ※ v-on: 의 단축어  :  @

    @click = "counter ++"  로도 표현이 가능함.

<button type="button v-on:click="counter ++">더하기</buton>

<script>
	let app=new Vue({
    	el: '#app',
        data(){
        	return{
            	counter : 0
            };
        },
        methods:{
        	add(){
            
            }
        }
    })
</script>

 

2) v-on 속성과 methods 사용

<button type="button" v-on:click="add">더하기</buton>

<script>
	let app=new Vue({
    	el: '#app',
        data(){
        	return{
            	counter : 0
            };
        },
        methods:{
        	add(){
               this.counter ++;
            }
        }
    })
</script>

v-on: 속성을 사용하면 가독성이 떨어지므로 method를 선언한 후 연결해주는 경우가 많다.

 

*위 코드에서 methods의 this는 new Vue 객체를 바인딩한다.

 

 

*event의 종류

 

@click 이벤트

: 클릭 이벤트 발생 시 메소드 실행

 

@keyup 이벤트

: keyup 이벤트 발생 시 메소드 실행 (특정 키를 누르면 이벤트가 발생한다는 뜻)

<input type="text" @keyup="keyUp"/>

<script>
	let app=new Vue({
    	el: '#app',
        methods:{
        	keyUp(event){
            	if(event.keyCode !==13 ){
                	console.log('엔터키 아님')
                    return;
                }
                console.log('엔터키 눌림')
            }
        }
    })
</script>

 

위에서는 keyCode를 사용했다. 

아래와 같이 key 별 별칭을 사용할 수도 있다.

.enter / .tab / .delete(delete키와 Backspace 키) / .esc / .space / .up / .down / .left / .right

 

key별칭 이벤트 사용 예시

<input @keyup.enter="submit"/>

enter키를 누르는 keyup이벤트가 발생하면 "submit" 메소드를 실행시킨다.