vue.js 이벤트 핸들링

이벤트 핸들링

이벤트 청취

v-on 디렉티브를 사용하여 DOM이벤트를 듣고 트리거 될 때 Javascript를 실행할 수 있습니다. 

HTML 부분
<div id="example-1">
    <button v-on:click="counter+=1">Add 1</button>
    <p>위 버튼을 클릭한 횟수는 {{counter}}번 입니다.</p>
</div>

JS부분
var vm = new Vue({
    el: 'example-1',
    data:{
        counter: 0
    }
})

메소드 이벤트 핸들러

많은 이벤트 핸들러의 로직은 더 복잡할 것이므로, javascript를 v-on 속성 값으로 보관하는 것은
간단하지 않습니다. 
이 때문에 v-on이 호출하고자 하는 메소드의 이름을 받는 이유입니다.

HTML 부분
<div id="example-2">
    <!-- greet는 메소드 이름으로 아래에 정의되어 있습니다. -->
    <button v-on:click="greet">Greet</button>
</div>

JS부분
var example2 = new Vue({
    el: '#example',
    data :{
        name: 'Vue.js'
    },
    //메소드는 methods객체 안에 정의합니다.
    methods:{
        greet: function(event){
            //메소드 안에서 사용하는 this는 Vue인스턴스를 가르킵니다.
            alert('Hello ' + this.name + '!')
            
            //event는 네이티브 DOM이벤트입니다.
            if( event ){
                alert(event.target.tagName )
            }
        }
    }
    
    //또한 Javascript를 이용해서 메소드를 호출할 수 있습니다.
    example2.greet()  // => Hello Vue.js
})