티스토리 뷰

Vue

Vue - method

김관장 2022. 6. 10. 18:00

1. Vue - method ?

  • 뷰의 메서드는 특정 기능 별로 묶을 수 있는 JS의 함수를 의미합니다.
  • 메서드는 흔히 뷰 탬플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성됩니다.

2. method 등록

<script>

    new Vue({

      methods: {

        // 사용 할 함수들 정의 ..
        testFn: function(){
            console.log('test');
        }

      }

    });

</script>
  • 위와 같이 Vue 정의 시 methods 속성에 함수들을 정의합니다.

2. method 실전 예제!

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <button v-on:click="logText">click me!</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            methods: {
                logText: function () {
                    console.log('clicked !!');
                }
            }
        })
    </script>
    
</body>
  • click me 버튼 클릭 시 'clicked!!'가 콘솔 창에 출력되는 것을 확인할 수 있습니다.

 

 

🔗 참고한 글

 

Cracking Vue.js

 

joshua1988.github.io

저작자표시

'Vue' 카테고리의 다른 글

Vue - router  (0) 2022.06.10
Vue - props / event emit  (0) 2022.06.08
Vue - Component  (0) 2022.06.03
Vue - Instance  (0) 2022.05.30
Vue - Vue 란?  (0) 2022.05.26
댓글