[Vue.js] 이벤트 핸들링

v-on 디렉티브

 

inline 태그인 onclick과 같이 vue.js에서 v-on 디렉티브를 이용하여 이벤트를 캐치할 수 있다. 

v-on:이벤트 = @이벤트 와 같이 사용할 수 있다. 

 

 

app.html 

 

<!--v-on:someActivity = @activity-->
<div id="example1">
    <button @click="counter += 1">Add 1</button>
    <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

<div id="example2">
    <button @click="makeAlert">make Alert!</button>
</div>

 

app.js

 

    let example1 = new Vue({
        el: '#example1'
        , data: {
            counter: 0
        }
    })

    let example2 = new Vue({
        el: '#example2'
        , data: {
            message: 'hi!'
        }
        , methods: {
            makeAlert: function(e) {
                alert(this.message)
            }
        }
    })

 

example1처럼 html태그 안에 data등을 삽입하여 조작할 수 있으나 복잡한 연산은 example2와 같이 methods를 이용할 수 있다. 

makeAlert안의 this는 Vue객체(example2)를 의미한다.

 

 

인라인 메소드 핸들러

 

인라인 태그로 메소드에 파라미터를 넣을 수도 있다. 이때 이벤트를 파라미터로 받고 싶을 땐 $event를 사용 할 수 있다. 

 

 

app.html

 

<div id="example3">
    <button @click="ISay('HI')">SAY HI!</button>
    <button @click="USay('YESORA',$event)">SAY YESORA!</button>
</div>

 

app.js

 

    let example3 = new Vue({
        el : '#example3'
        , methods : {
            ISay : (something) => {
                alert(something)
            }
            ,USay : (something, e) => {
                alert(something+","+e)
                // e.preventDefault();
            }
        }
    })