Vue click 이벤트핸들러

 

이벤트 핸들러

 

HTML 클릭시 코드 실행

 

javascript:

<div>    
    <h4>{{products[0]}}</h4>
    <p>50 만원</p>
    <button onclick="자바스크립트">허위매물신고</button> <span>신고수 : 0</span>
</div>

 

버튼을 누르면 숫자를 찾아서 +1

 

+1 된 것을 HTML에 반영시키기

 

javascript의 함수:

function 어쩌구() {
    console.log("안녕")
    console.log("안녕")
    console.log("안녕")
}

 

긴 코드를 짧게 줄이기 위해 사용

 

---

 

vue:

<div>    
    <h4>{{products[0]}}</h4>
    <p>50 만원</p>
    <button v-on:click="신고수++">허위매물신고</button> <span>신고수 : 0</span>
</div>

 

v-on:click="신고수++"
@click="신고수 += 1"

둘은 같다

 

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

 

(데이터가 변하면 HTML에 바로 반영되기 때문)

 

vue의 함수 위치는 data 뒤에

 

 

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

methods : {
    increase(){
    	this.신고수 += 1
    },
},

 

 

---

 

참고

https://www.youtube.com/watch?v=Agm-F366ZwY&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=5