1. [ 이벤트 핸들러란 ? ]
HTML에 적용된 이벤트를 클릭하면 그에 해당하는 코드를 실행하는 임무를 가지고 있는걸 의미
2.[ 클릭이벤트 핸들러 문법 ]
•
기존 JavaScript(자바스크립트)은 아래와 같았다
<button onclick="">버튼</button>
JavaScript
복사
•
Vue 클릭 이벤트
<button v-on:click="">버튼</button>
<button @click=""></button>
JavaScript
복사
Vue는 실시간 렌더링되어서 버튼누르면 관련된 데이터만 +1 증가시키게해줘라는걸 알려주기만하면됨Vue는 실시간 렌더링되어서 버튼누르면 관련된 데이터만 +1 증가시키게해줘라는걸 알려주기만하면됨
Vue는 데이터 변하면 HTML에 바로 반영됨
클릭뿐만 아니라 여러가지 이벤트 사용가능
@mouseover : 이 버튼에 마우스를 올려놓으면 해당 자바스크립트 구문 실행
자세한 이벤트는 @이하고 ctrl + space치고 확인해보자
3. [ 만약 입력할 코드가 길어지면 어떻게 해야할까? ]
ㅁ 함수를 활용하자!
Vue 함수를 만들고싶으면 data 끝나는 부분에 methods : {} 를 사용하면된다
함수안에서 데이터를 쓸 때는 this를 꼭 사용해야하며 표현식은 this.데이터명이다.
this란? → 나의 Object를 뜻함
ㅁ [ SampleCode ]
data() {
return {
//여기에 데이터보관하자
//데이터는 object 자료로 저장해주셈 {자료이름 : 자료내용}
//충격 HTML 속성도 데이터 바인딩 가능
신고수 : [0,0,0],
메뉴들 : ['Home', 'Shop', 'About'],
price : [50,60,70],
price1 : 50,
price2 : 60,
price3 : 70,
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
//입력할 코드가 길면 함수를 활용하자
//Vue 함수 만들고 싶으면 data끝나는 부분 뒤에 methods{} 를 사용한다
// 함수안에서 데이터 쓸 때는 this.데이터명을 꼭써줘야한다.
// this란? 나의 object를 뜻함
methods : {
increase1() {
this.신고수[0]++;
},
increase2() {
this.신고수[1]++;
},
increase3() {
this.신고수[2]++;
}
},
JavaScript
복사
