[vue3] 이벤트 핸들러

<자바스트립트 방법>

태그 안에 onclick=""

버튼을 누르면 숫자 +1

그리고 +1된 데이터를 HTML에 반영

 

<vue 문법>

태그 안에 v-on:click="" 혹은 @click=""

버튼누르면 관련된 데이터만 +1

*vue 는 데이터가 변하면 HTML에 바로 반영됨(자동 렌더링)

 

** click 이외에도 여러가지 이벤트핸들러가 있다 (VSCode기준 ctrl + space로 확인가능)

- mouseover : 마우스를 갖다댔을때 동작

- drag : 버튼을 드래그 했을때 동작

- input : 글자를 입력했을때

 

"" 안에 js 코드가 길어지면 함수를 만들고 함수명을 기재한다

vue에서 함수만드는 방법

methods:{함수(){}} 만들기

 

*주의사항

함수 안에서 데이터 쓸때 this.데이터명

 

increase() 가아닌 increase