[Vue.js] onclick | submit 적용 방법

1. onclick

javascript의 경우에는 

<input type="text" onclick="test()">

이런식으로 적용되었다면 vue.js는 조금 다르게 적용된다.

 

<div id="app">
	{{ year }}<br>
    <button v-on:click="plus">더하기</button>
    <button v-on:click="minus">빼기</button>
</div>
<script>
	new Vue({
    	el: '#app',
        data: {
        	year: 2021
        },
        methods: {
        	plus(){
            	this.year++;
            },
            minus(){
            	this.year--;
            }
        }
    })
</script>

v-on:click 을 이용하여 클릭할 경우 해당 함수로 접근하게 됩니다.

 

2. submit

<div id="app">
	<form v-on:submit="submit">
    	<input type="text" v-model="message"> <br>
        <button type="submit">Submit</button>
    </form>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	message: ''
        },
        methods: {
        	submit() {
            	alert("입력한 값은 " + this.message + " 입니다.");
            }
        }
    })
</script>

submit을 하게되면 reloading되기 때문에 v-on:submit 뒤에 이벤트 수식어를 붙여 처리한다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

자세한 설명은 아래 참고

이벤트 핸들링 — Vue.js