Vue js 2 Event

Vue Event 는 아래와 같이 사용합니다.

 

<template>
  <div id="app">
    <button v-on:click="hello"> 버튼1 </button>
    <button @click="hello"> 버튼2 </button>

    <form @submit.prevent="submit1" >
      <button type="submit"> 전송1 </button>
    </form>

     <form @submit="submit2" >
      <button type="submit"> 전송2 </button>
    </form>

  </div>
</template>

<script>
export default {
    data(){
      return{
        name : 'grayCode'
      }
    },
    methods : {
      hello(){
        alert('안녕하세요 !');
      },

      submit1(){
        console.log('전송 후 리로드 테스트 1');
      },
      submit2(e){
        e.preventDefault();
        console.log('전송 후 리로드 테스트 2');
      }
    }
}
</script>

 

Vue js 의 이벤트는 기존 onClick = "" 과 다르게 v-on:click="" 문법을 씁니다.  v-on: 을 줄여서 @ 하나로 대체

 

가능합니다.  이벤트에 메서드를 사용해서 원하는 로직을 만들 수 있습니다. 

 

추가적으로 submit을 사용 할 경우 페이지가 리로드 되는데 vue 에서는  @submit 에 .prevent를 붙이면

 

리로드를 막을 수 있습니다.  ( 기존에는 e.preventDefault()  )

 

다른 이벤트들도 많으니 공식 문서를 참조하시면 되겠습니다.

 

 

https://kr.vuejs.org/v2/guide/events.html

이벤트 핸들링 — Vue.js