Vue

Vue.js 이벤트(Event)

정숙씨의 쏠쏠한 코딩 2021. 12. 6. 00:27
  • 이벤트(Event)란
    • 사건이 발생 했을때 무엇을 진행 할것인지를 뜻한다.
  • 간단한 click event
    • 버튼 클릭시 alert 이벤트 실행 예제
    • 사용방법
      • javascript 에서는 html 요소에서 onclick = "" 이벤트를 사용 하였으나 Vue에서는 다른 방식을 사용함.
      • <button v-on:click = "실행 할 method">


        • 결과
      • 메소드 이벤트 핸들러
        • 이벤트 진행시 methods 객체내 함수를 추가하여 사용 할 수 있다.
        • html
        • Vue.js
        • 결과
      • 키 수식어 이벤트
        • 키보드 이벤트를 발동 시켜야 할때 Vue.js 에서는 키 수식어 이벤트를 사용한다.
        • input 박스 내 엔터키 이벤트 발동시
        • 사용방법
          • <input type="text" v-on:keyup.enter="호출할 메서드명"/>
        • 예시