[Vue] 05. Vue Event 처리

1. v-on 사용하는 방식

1. Inline 방식

<div id="app">
    <p>클릭한 횟수 = {{cnt}}번</p>
    <button v-on:click="cnt+=1">클릭</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cnt: 0,
            }
        },
    })
</script>

 

 

2. method 방식

v-on은 이벤트 발생 시, 처리해야 하는 method이름을 받아서 처리한다.

<div id="app">
    <p>클릭한 횟수 = {{cnt}}번</p>
    <button v-on:click="plus">클릭</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cnt: 0,
            }
        },
        methods:{
            plus(){
                console.log("cnt 1증가!!");
                this.cnt+=1;
            }
        }
    })
</script>

 

 

3. Inline + method 방식

Javascript구문으로 method를 사용하는 방식으로, 위에서 2번보다는 1번에 가까운 방식이다.

이때, 이벤트를 호출한 타겟의 정보를 event라는 객체가 가지고 있다.

<div id="app">
    <p>클릭한 횟수 = {{cnt}}번</p>
    <button v-on:click="plus(3)">클릭</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cnt: 0,
            }
        },
        methods:{
            plus(gap){
                console.log(event.target);
                this.cnt+=Number(gap);
            }
        }
    })
</script>

 

 

 

2. @ 사용하는 방식

v-on: = @이고, 이 방식 또한 위 3가지 방식 모두 적용 가능하다.

 

 

예시

<button @click="cnt+=1">클릭</button>