[Vue3 opt] 부동산 홈페이지 생성 3 - Event Handler

• v-on:이벤트
• 함수
• 중요한 차이점

 

 

(애플코딩님 vue 4강)

 

vue 에서 어떤 버튼을 클릭하면 이벤트가 동작하는 것

<div>
    <h3>{{products[0]}}</h3>
    <p>50만원</p>
    <button>허위매물신고</button> <span>신고수 : 0</span>
</div>

 

"허위매물신고" 버튼 클릭 시 신고수 +1 씩 증가하도록 이벤트 구현

 

 

● v-on:click

 

기존 JS 에서는 onClick="" 를 이용했었다.

vue에서는  v-on:click="" 를 이용한다.

또는 @click="" (vue의 약어가 @이다. html 문법 아님. 뷰 문법)

 

 

기존 JS에서는 onClick 버튼을 누르면, 해당 숫자를 찾아서 +1을 해주고 그걸 다시 HTML 에 반영했다.

vue는 HTML 을 조정할 필요가 없다. 실시간 재렌더링이 되기 때문이다.

 

데이터 저장소에 변수를 추가한 뒤 기본값을 0으로 주고

report:0,

 

 

클릭이벤트를 report++ 로 주면 끝..

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

 

 

 

 

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

 

이런식으로 할 경우 2씩 증가한다. +=1 은 ++  와 같은 결과

 

---

●  mouseover Event

<button @mouseover="report2+=1">허위매물신고</button> <span>신고수 : {{report2}}</span>

 

마우스 커서 올렸을 때

 

@input, @drag 등등 많다..

 

그리고 이벤트 코드가 길어질 경우 아래 함수로 뺄 수 있다.

 

 

● 함수 

 

기존 JS 에서는 이런식으로 진행했었지만

function 함수명() {
}

 

 

- vue에서는 data 끝나는 부분에 methods : {} 로 쓴다.

 

 

 

methods : {

},

여기 꼭! 콤마!

 

그리고 **** 중요한 것

기존 JS에서는 onClick="함수명()"; 이었지만 vue에서는 함수명 뒤에 ()를 쓰지 않는다.

또한, methods: 에서 data: 에서 정의한 변수를 사용할 때 앞에 꼭 this. 를 붙여줘야 한다.

<button @click="increase">허위매물신고</button> <span>신고수 : {{report}}</span>

methods : {
    increase() {
        this.report += 1;
    }
},

 

또한 각각 버튼을 세 개 만들고

report = 0, 
report1=0, 
report2=0,

이런식으로 변수 세 개 생성해도 되지만

report = [0,0,0],

 

이렇게 정의한 뒤 report[0], report[1], report[2] 이렇게 사용해도 된다.

---

    <div>
        <h3>{{products[0]}}</h3>
        <p>50만원</p>
        <button @click="increase">허위매물신고</button> <span>신고수 : {{report[0]}}</span>
    </div>
    <div>
        <h3>{{products[1]}}</h3>
        <p>60만원</p>
        <button @mouseover="report[1]+=1">허위매물신고</button> <span>신고수 : {{report[1]}}</span>
    </div>
    <div>
        <h3>{{products[2]}}</h3>
        <p>70만원</p>
        <button @click="report[2]++">허위매물신고</button> <span>신고수 : {{report[2]}}</span>
    </div>
    
    
    
    이렇게 짜고 <script> 부분에
    
    
    
    export default {
    name: 'App',
    data() {
        return {
            report:[0,0,0],
            menus:["Home", "Shop", "About", "QnA"],
            products:["역삼동","천호동","봉천동"]
        }
    },
    methods : {
        increase() {
            this.report[0] += 1;
        }
    },
    components: {}
}

 

결론 : 함수를 쓰든 +=1; 하든 ++; 하든 다 같다~!

 

 

 

중요한 차이점

 

위 내용은 optionsAPI 방법이다.

내가 앞으로 개발할 때는 compositionAPI 방법을 사용하기 때문에

일반 변수로 선언할 경우 optionsAPI처럼 자동 렌더링 되지 않아서

변수 선언을 꼭 일반 변수가 아닌 ref로 선언해야 하고,

값도 this.report 등으로 조작하는게 아닌 this.report.value 처럼 .value를 붙여야 한다.

 

ref() 또는 reactive()로 명시적 선언 필요