어떤 HTML 요소를 클릭했을 때 뭔가 일이 일어나게 만들고 싶으면
<div onclick=""> 이 안에 자바스크립트를 집어넣습니다.
Vue에서는 살짝 다르게 집어넣으면 됩니다. @click="" 이걸 집어넣으면 됩니다.
문법만 설명하면 다음날 다 까먹을게 분명하니
저번시간까지 만들던 부동산 사이트에 허위매물 신고버튼과 기능을 만들어보며 배워봅시다.
허위매물 신고버튼과 신고수를 만들어봅시다
일단 저번시간 반복문 돌린건 복잡해보이니까 다시 원래대로 복구시킵니다.
<div>
<h4>{{products[0]}}</h4>
<p>50만원</p>
</div>
<div>
<h4>{{products[1]}}</h4>
<p>50만원</p>
</div>
<div>
<h4>{{products[2]}}</h4>
<p>50만원</p>
</div>
여기다가 버튼을 하나 추가해보자는겁니다.
<div>
<h4>{{products[0]}}</h4>
<p>50만원</p>
<button>허위매물신고</button>
<span>신고수 : 0</span>
</div>
이거 버튼을 누르면 옆에 있는 신고수가 1 증가하는 기능을 만들어볼겁니다.
그러려면 어떻게 해야할지 생각해봅시다.
일단 신고수를 기록할 수 있는 변수나 데이터가 하나 필요하지 않을까요?
data(){
return {
신고수 : 0,
}
}
<div>
<h4>{{products[0]}}</h4>
<p>50만원</p>
<button>허위매물신고</button>
<span>신고수 : {신고수}</span>
</div>
1. 그래서 하단에 데이터를 하나 만들고 2. 데이터를 HTML란에 꽂아넣었습니다.
이제 버튼을 누르면 신고수라는 데이터를 1증가시키면 신고수가 1이 되고 HTML도 재렌더링이 되고
원하는 기능이 완성될 것 같습니다.
버튼을 누르면 기능을 실행하고 싶은 경우
자바스크립트는 onclick="" 이라는 이벤트 핸들러를 HTML태그에 달았지만
Vue에서는 @click="" 이라고 사용합니다.
그럼 안에다가 자바스크립트를 자유롭게 입력가능합니다.
<div>
<h4>{{products[0]}}</h4>
<p>50만원</p>
<button @click="신고수++">허위매물신고</button>
<span>신고수 : {신고수}</span>
</div>
이거 버튼을 누르면 신고수라는 데이터를 +1 해주고 싶어서 저렇게 작성했습니다.
그럼 버튼 누를 때마다 신고수가 +1 됩니다. 끝!
신고수++
신고수+=1
아무렇게나 작성할 수 있습니다.
@click 말고 다른 이벤트 핸들러도 만들 수 있습니다.
@mouseover 하면 클릭이 아니라 마우스만 댔을 때 자바스크립트를 실행가능하고
@input 하면 인풋에 값을 입력했을 때 자바스크립트를 실행가능하고
님들이 알던 이벤트명을 자유롭게 기입해주면 됩니다. 모르면 어쩔 수 없이 @click이나 씁시다.
코드가 길 경우 함수를 만들어씁니다
긴 코드를 짧게 축약해주는게 바로 함수문법입니다.
그래서 @click 안에 들어갈 말이 너무 길다면 함수를 만들어서 집어넣으십시오.
함수 만드는 자리는 이미 정해져있습니다. 밑에서 methods : {} 라는 항목을 신설해주면 됩니다.
data(){
return {
신고수 : 0,
},
}
methods : {
increase(){
this.신고수 += 1
}
}
methods라는 항목을 만드신 후
함수를 안에다가 계속 만들어낼 수 있습니다. 함수만들 땐 함수이름(){} 이게 끝입니다.
그리고 이건 꼭 기억해야하는 부분인데
여기서 데이터를 가져다쓰고 싶으면 꼭 this.데이터이름 이라고 사용해야합니다.
this는 그냥 위에 있는 데이터와 함수를 담은 큰 object라고 생각하시면 되겠습니다.
그리고 아까 HTML 부분에서 함수를 자유롭게 사용하면
아까 축약했던 this.신고수+=1 이게 실행됩니다. 끝
<div>
<h4>{{products[0]}}</h4>
<p>50만원</p>
<button @click="increase()">허위매물신고</button>
<span>신고수 : {신고수}</span>
</div>
함수() 이렇게 하셔도 되고
함수이름만 쓰셔도 됩니다. @click="increase" 이렇게요.
함수는 한글로 작명하면 잘 안될 수 있습니다.
'Vue.js' 카테고리의 다른 글
import / export (0) | 2024.01.28 |
---|---|
v-if 와 모달창 만들기 (1) | 2024.01.28 |
Vue 반복문 v-for (1) | 2024.01.28 |
Vue 데이터바인딩 문법 (0) | 2024.01.28 |
Vue3 설치 (0) | 2024.01.28 |