04. 이벤트(Event)

① 기본 : 이벤트 설명

 

기본 CSS, JavaScript 에서는 OnClick 으로 button 에 이벤트를 설정 했으나,  VUE 에서는 V-ON:click 를 사용 한다.

 

다음은 method 를 이용 버튼 클릭시 Alert 띄우는 기능을 만든 후 실행해 보겠다.

메소드에 alert 는 이름을 가진 기능을 만든 후 .

버튼에 위에 메소드에 선언한 alert 기능을 연결한다.

 

브라우저에서 버튼 클릭시 메소드에 설정한 'Hello Wooktae' 가 출력되는걸 확인할 수 있다.

② 기본 보다 약간 심화된 이벤트 

year 이라는 Data 선언 후 버튼 이벤트를 통해 year 를 더하고 빼기 만들기

data 에 year 를 먼저 선언 한 뒤 메소드에 plus , minus 기능을 각각 만들어 준다.

기존 2021 에서 더하기 버튼 클릭시 2022 로 변경

 

2022 에서 빼기를 클릭 하여 2019로 만들었다.

③ 이벤트 핸들러 ( 참고 : kr.vuejs.org/v2/guide/events.html )

다음은 공식 vue 가이드에서 제공하는 이벤트 핸들러를 통한 맛보기 코딩

 

form 을 실행하게 되면 자동으로 화면이 reload 되는데 이를 막아주는 가이드에서 기본으로 제공하는 이벤트 핸들러 중 prevent를 사용해 보았다.

form 태그안에 v-on:submit.prevent 를 사용하면 자동으로 reload는 되는걸 막아준다.

콘솔에 clicked 문구를 출력해 보자 ! 위에 선언한 prevent 를 안했을 시 alert 창 클릭시 아주 빠르게 출력되고 브라우저가 reload 되기 때문에 정확히 출력됐는지 확인이 어렵다

콘솔에 Clicked 가 잘 출력되는걸 확인할 수 있다.