WOOKTAE
2021. 1. 31. 16:12
① 기본 : 이벤트 설명
기본 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로 만들었다.
다음은 공식 vue 가이드에서 제공하는 이벤트 핸들러를 통한 맛보기 코딩
form 을 실행하게 되면 자동으로 화면이 reload 되는데 이를 막아주는 가이드에서 기본으로 제공하는 이벤트 핸들러 중 prevent를 사용해 보았다.
form 태그안에 v-on:submit.prevent 를 사용하면 자동으로 reload는 되는걸 막아준다.
콘솔에 clicked 문구를 출력해 보자 ! 위에 선언한 prevent 를 안했을 시 alert 창 클릭시 아주 빠르게 출력되고 브라우저가 reload 되기 때문에 정확히 출력됐는지 확인이 어렵다
콘솔에 Clicked 가 잘 출력되는걸 확인할 수 있다.