Vuejs 2 . 이벤트 (Events)

<button>태그에 클릭이벤트를 만들어보는 예제입니다.

메소드에 alert()함수를 만들고 v-on:click 속성을 만들어 버튼을 클릭했을 때 alert창이 뜨도록 만들었습니다.

 

 

 

이번에는 더하기 버튼을 클릭하면 년도수가 1씩 증가하고 빼기 버튼을 클릭하면 년도수가 1씩 줄어드는 이벤트를 만들어본 예제입니다.

 

 

 

 

이번 예제는 버튼을 클릭하면 alert창이 뜨는 예제입니다.

이 예제로 새로 알게된것은  vue.js에서 event.preventDefault() 를 사용하는 방법입니다.

submit버튼을 클릭하면 재로드가 되는데 이것을 막기 위하여 자바스크립트에서는 event.preventDefault()을 씁니다.

vue.js에서는 더 간편하게 속성뒤에 .prevent를 붙여 사용할 수 있습니다.

console.log로 보면 클릭했을때 alert창이 뜨고 확인을 눌렀을 때 재로드가 되지 않는것을 확인할 수 있습니다.

 

 

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!