Vue.js 강좌 이벤트 처리 방법 v-on 09

이전 강좌

2022.12.27 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 심화 양방향 바인딩 v-model 08

Vue.js 강좌 심화 양방향 바인딩 v-model 08

Vue.js 강좌 심화 양방향 바인딩 v-model 08 이전 강의 2022.12.27 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 양방향 바인딩 v-model 07 Vue.js 강좌 양방향 바인딩 v-model 07 Vue.js 강좌 양방향 바인딩 v-model 07 이전

ecolumbus.tistory.com

이벤트 관련해서는 v-on 디렉티브를 사용한다.

이번 포스팅에서는 v-on 디렉티브를 사용해 이벤트를 처리하는 방법을 실습해 본다.

지난 몇몇 강의에서 Vue 인스턴스를 생성하고 methods 옵션을 추가해서 사용했었다.

Vue 인스턴스의 옵션을 기억해 보자.

el 옵션에서는 "Html과 연결을 하고 예 app"
data 옵션에서는 "변수 즉 데이터를 생성"
methods 옵션에서는 "이벤트에 관련된 행위, 동작, 명령을 수행"

버튼을 클릭했을 때, Vue 인스턴스의 메서드를 실행하는 처리를 만들 수 있다.

<button v-on:이벤트명="메서드명">

2회 강의에서 간단하게 만들어 봤던 클릭 하면 1이 증가하는 예제를 다시 만들어보자.

소스

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js sample</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script>

    <script>
        function good(){
            alert("좋아좋아~");
        }
        
        window.onload = function () {
            new Vue({
                el: "#app",
                data: {
                    count:0,
                    isClick: false
                },
                methods : {
                    countUp: function(){
                        this.count++;
                    },
                    oneClick: function(){
                        this.isClick = true;
                        good();
                    }
                }
            })
        }
    </script>
</head>

<body>
<h2>Vue.js 강좌 이벤트 처리 방법 v-on 09</h2>
<div id="app">
    <p>01. 예제 1씩 증가하는 이벤트</p>
    <button v-on:click="countUp">1씩증가</button>
    <p>count : {{ count }}</p>
    <p>02. 예제 클릭하면 두번째는 클릭할 수 없는 "좋아~" 이벤트</p>
    <button value="good" v-bind:disabled="isClick" v-on:click="oneClick">좋아</button>
</div>
</body>
</html>

실행

1씩 증가하는 이벤트, 좋아 클릭시 두번째는 클릭못하는 이벤트

설명

1번 예제는 data 옵션에 count: 0이라는 변수를 선언한 후, 1씩 증가 이벤트가 발생할 때마다 methods에 정의된 countUp 메서드로 count++ 증가시켰다.

2번 예제는 data 옵션에 isClick: false라는 부울린 변수 fasle로 초기값을 준 상태에서 oneClick 이벤트가 발생 시 methods에 정의된 oneClick 기능을 동작시켰다. oneClick 메서드에서는 isClick 변수를 true로 변경하고 good() 메서드를 호출한다. good() 메서드는 "좋아 좋아" 알림을 발생시킨다. 이후 v-bind:disabled=isClick 상태를 변경함으로 "좋아" 버튼을 비활성화 상태로 변경한다.

v-on:이벤트 = "메서드" 명, 이라고 위에서 설명했듯이 위 예제는 click 이벤트를 조합해서 기능을 구현해 봤다.

다음 심화 포스팅에서는 키 입력과 메서드에 변수를 넘기는 기능을 구현해보도록 한다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 조건, 반복 (v-if ,v-for) 11 (0)	2022.12.28
Vue.js 강좌 파라미터를 전달하여 이벤트 처리 v-on 10 (0)	2022.12.28
Vue.js 강좌 심화 양방향 바인딩 v-model 08 (0)	2022.12.27
Vue.js 강좌 양방향 바인딩 v-model 07 (0)	2022.12.27
Vue.js 강좌 뷰 인스턴스 06 (0)	2022.12.26

슬기로운 개발자 생활

Vue.js 강좌 이벤트 처리 방법 v-on 09