vue.js 이벤트 핸들링 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

vue.js 이벤트 핸들링 정보

기타 vue.js 이벤트 핸들링

본문

이벤트 핸들링

 

이벤트 청취

v-on 디렉티브를 사용하여 DOM이벤트를 듣고 트리거 될 때 Javascript를 실행할 수 있습니다. 

HTML 부분
<div id="example-1">
    <button v-on:click="counter+=1">Add 1</button>
    <p>위 버튼을 클릭한 횟수는 {{counter}}번 입니다.</p>
</div>

JS부분
var vm = new Vue({
    el: 'example-1',
    data:{
        counter: 0
    }
})


메소드 이벤트 핸들러

많은 이벤트 핸들러의 로직은 더 복잡할 것이므로, javascript를 v-on 속성 값으로 보관하는 것은
간단하지 않습니다. 
이 때문에 v-on이 호출하고자 하는 메소드의 이름을 받는 이유입니다.

HTML 부분
<div id="example-2">
    <!-- greet는 메소드 이름으로 아래에 정의되어 있습니다. -->
    <button v-on:click="greet">Greet</button>
</div>

JS부분
var example2 = new Vue({
    el: '#example',
    data :{
        name: 'Vue.js'
    },
    //메소드는 methods객체 안에 정의합니다.
    methods:{
        greet: function(event){
            //메소드 안에서 사용하는 this는 Vue인스턴스를 가르킵니다.
            alert('Hello ' + this.name + '!')
            
            //event는 네이티브 DOM이벤트입니다.
            if( event ){
                alert(event.target.tagName )
            }
        }
    }
    
    //또한 Javascript를 이용해서 메소드를 호출할 수 있습니다.
    example2.greet()  // => Hello Vue.js
})

추천
0

댓글 0개

전체 186
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT