[Vue.js] 메서드 이벤트, 인라인 메서드 이벤트

 

1. 메서드 이벤트 핸들러

메서드 이벤트 핸들러는 컴포넌트의 methods 옵션에 정의되어 있는 메서드 이름을 지정함. 

<button v-click="handleClick">클릭</button>

=> 버튼의 클릭 이벤트 핸들러를 handleClick 메서드로 지정하는 코드 

 

 

v-on 디렉티브는 @ 로도 사용가능함

<div id="app" >
   <button @click="handleClick">클릭</button>
</div>

 

var app = new Vue({ 
    el: '#app', 
    methods: {
        handleClick: function(){
            alert('클릭')
        }
    }
})

 

 

 

2. 인라인 메서드 핸들링

 - 디렉티브의 값에 자바스크립트 식을 직접 작성하는 것 

<button v-click="count++">클릭</button>