search

methods

hashtag
Vue methods 속성

Vue method는 실행 가능한 기능을 Vue 인스턴스 내부에 호출 가능한 함수 형태로 보관하는 영역이다.

hashtag
사용법

methods 속성도 Vue 인스턴스 내부에 선언한다.

const app = new Vue({
    //..중간 생략..

    이름 : function(){},
    //또는
    이름(){},

    //..중간 생략
});

hashtag
사용 예제 - count 증가 및 감소

<!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>Vue method</title>
    <style>
        input {
            font-size: 20px;
            padding:0.5em;
            display: block;
            margin: 0.5em 0;
        }
        button {
            font-size: 20px;
            padding:0.5em;
            margin-right: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="number">
        <button v-on:click="plusOne">plusOne</button>
        <button v-on:click="plusTen">plusTen</button>
        <button v-on:click="minusOne">minusOne</button>
        <button v-on:click="minusTen">minusTen</button>
        <button v-on:click="plus(1)">plus(1)</button>
        <button v-on:click="minus(1)">minus(1)</button>
    </div>    

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    number:0,
                };
            },
            methods:{
                plusOne(){
                    this.number += 1;
                },
                plusTen(){
                    this.number += 10;
                },
                minusOne(){
                    this.number -= 1;
                },
                minusTen(){
                    this.number -= 10;
                },
                plus(count){
                    this.number += count;
                },
                minus(count){
                    this.number -= count;
                },
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

위의 예제를 실행하면 버튼을 누름에 따라 미리 만들어둔 메소드가 실행되는 것을 확인할 수 있다. 메소드 내부에서는 this라는 키워드로 Vue instance의 다른 요소에 접근할 수 있으며 이를 통하여 data와 같은 속성들을 이용한 작업을 수행할 수 있다.

다른 메소드를 호출할 경우에도 반드시 this 키워드를 이용해야 한다.

circle-info

예제 코드에서 v-on:click은 클릭 이벤트를 처리하기 위한 Vue directive이다.

circle-info

위의 두 코드는 메소드를 부르는 방식의 차이가 있는데, 이 부분은 이벤트 페이지에서 다룬다.

Previousvs ComputedNextVue directive

Last updated