Vue03 이벤트핸들러

오늘 배울 내용: 이벤트 핸들러

HTML 클릭시 특정기능들(코드)을 실행하는 법.

JavaScript	Vue.js
onclick=“”	v-on:click=“자바스크립트~~”
	@click=“”

v-on의 약자가 @

버튼을 누르면 신고수를 1 증가시키자

• 쌩자바스크립트 스타일:
  1. 버튼누르면 숫자 찾아서 +1
  2. 그리고 +1된 걸 HTML에 반영해주셈

근데 vue 로 작성하면 html을 바꾸거나 html을 조정하거나 할 필요가 전혀 없다.

왜? vue는 실시간 렌더링이 되기 때문. 우리가 할 것은 +1만 더해주면 됨

• Vue 스타일:

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

     (Vue는 데이터가 변하면 HTML에 바로 반영됨)

<button @click="신고수++">허위매물신고</button> <span>신고수 : </span>

(참고) 여러가지 이벤트 사용 가능

@mouseover이벤트 여러가지 이벤트들이 있다.

함수

함수의 역할은 긴 코드를 짧은 단어로 축약하는 것.

입력할 코드가 좀 길면, 밑에서 함수를 만들어 함수명을 넣으면 된다. 자바스크립트에서 함수를 왜 쓰냐? 긴 코드를 한 단어로 축약시키려고 쓴다.

Vue에서 함수 만들고 싶으면

data 밑 영역에다가

methods: {

  },

만들기

Vue에서 함수 만들 때 주의사항

함수 안에서 데이터 쓸 땐 this.데이터명으로 쓸 것