VUE methods

2022-01-28

JavaScript / Vue

이벤트 핸들러(v-on) 로직(논리값)과 methods의 속성

메서드는 뷰 인스턴스에 포함하여 사용하는 함수를 의미.
특히, 뷰에서 methods 속성은 이벤트 핸들러를 사용하여 (클릭) 이벤트가 발생했을 때 실행되는 로직에 되는 로직에 사용.

computed 속성 vs methods 속성

공통점 : 두 가지 속성 모두 함수문을 실행하고 있다는 점
차이점 :

computed 속성

우선 처리
초기 계산이 많아서 캐시 메모리가 필요한 경우 사용
머시 태그에 작성될 이벤트에 의한 로직이 복합한 경우

methods 속성

이벤트 핸들러로 로직을 함수로 정의시 사용
후속 처리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09_vue_methods</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- ctrl + / => 주석 -->
    <div id="main">
        <h3>클릭할 때마다 카운트 다운이 되도록 구성하는 프로그램</h3>
        <p>클릭 횟수 : {{nClicked}}</p>
        <p>카운트 다운 : {{fnCounter}}</p>
        <button v-on:click="funcCount">카운트 클릭</button>
    </div>
    <script>
        new Vue({
            el : "#main",
            data : {
                nClicked : 0 // 한번도 클릭하지 않은 초기값
            },
            // 캐시 메모리에 저장된 상태로 기다린다. (웹브라우저에서는 사용자가 어떤 액션을 취할지를 기다리고 있다. -> 사용자의 액션이 들어오기 전의 조건을 구성)
            // 페이스북에서 좋아요라는 횟수가 브라우저 열면서 가져온다. (이전 좋아요 횟수를 표시)
            computed : {
                fnCounter() {
                    console.log(this);
                    if(this.nClicked < 10) {
                        return 10 - this.nClicked;
                    } else {
                        return "출발";
                    }
                }
            },
            // 함수로써 사용자가 어떤 액션을 취하기 전까지는 어떠한 역할도 할 수 없음. (사용자 입장에서는 액션을 취한 후 진행)
            // 인스턴스 메모리로는 존재하고 있음
            methods : {
                funcCount() {
                    console.log(this);
                    if(this.nClicked < 10) this.nClicked++;
                    console.log(this.nClicked);
                }
            }
        });
    </script>
</body>
</html>

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미