Vue.js 의 v-on(이벤트 처리)

5698 단어 vuevon이벤트
Vue.js 이벤트 처리
감청 사건
우 리 는 v-on 명령 으로 DOM 사건 을 감청 하여 자바 스 크 립 트 코드 를 촉발 할 수 있다.

<div class="box">
  {{msg}}
  <input type="button" value="  " v-on:click="msg+=1"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
})
결실

방법 이벤트 프로세서
많은 사건 처리 의 논리 가 매우 복잡 하기 때문에 자바 스 크 립 트 코드 를 v-on 명령 에 직접 쓰 는 것 은 불가능 하 다.따라서 v-on 은 정 의 된 방법 을 받 아들 여 호출 할 수 있다.

<div class="box">
  {{msg}}
  <input type="button" value="  " v-on:click="jia"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  //   `methods`        
  methods:{
    jia:function(event){
      console.log(event)
    }
  }
})
결실

MouseEvent {isTrusted: true, screenX: 18, screenY: 107, clientX: 18, clientY: 17, …}
내 연 프로세서 방법

<div class="box">
  {{msg}}
  <input type="button" value="  " v-on:click="jia('my day')"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  methods:{
    jia:function(x){
      console.log(x)
    }
  }
})
결실
my day
이벤트 수정자
이벤트 처리 프로그램 에서 이벤트.preventDefault()나 이벤트.stopPropagation()을 호출 하 는 것 은 흔 한 수요 입 니 다.비록 우리 가 methods 에서 이 점 을 쉽게 실현 할 수 있 지만 더 좋 은 방법 은 methods 는 순수한 데이터 논리 만 있 을 뿐 DOM 사건 의 세부 사항 을 처리 하 는 것 이 아니다.
이 문 제 를 해결 하기 위해 Vue.js 는 v-on 에 사건 수식 자 를 제공 했다.점(.)이 표시 하 는 명령 접 두 사 를 통 해 수식 자 를 호출 합 니 다.
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • 
    <!--          -->
    <a v-on:click.stop="doThis"></a>
    <!--            -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!--         -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!--       -->
    <form v-on:submit.prevent></form>
    <!--                  -->
    <div v-on:click.capture="doThis">...</div>
    <!--           (       )        -->
    <div v-on:click.self="doThat">...</div>
    
    장식 부 호 를 사용 할 때 순서 가 중요 하 다.해당 코드 는 같은 순서 로 만들어 집 니 다.따라서@click.prevent.self 를 사용 하면 모든 클릭 을 막 을 수 있 고@click.self.prevent 는 요소 의 클릭 만 막 을 수 있 습 니 다.
    
    <!--             -->
    <a v-on:click.once="doThis"></a>
    네 이 티 브 DOM 이벤트 에 만 작용 할 수 있 는 다른 수정자 와 는 달리.once 수정자 는 사용자 정의 구성 요소 이벤트 에 도 사용 할 수 있 습 니 다.구성 요소 에 관 한 문 서 를 아직 읽 지 않 았 다 면 걱정 하지 마 세 요.
    키 수식 부호
    키보드 사건 을 감청 할 때,우 리 는 자주 흔히 볼 수 있 는 키 값 을 모니터링 해 야 한다.Vue 는 v-on 이 키보드 이 벤트 를 감청 할 때 키 수식 자 를 추가 할 수 있 도록 합 니 다.
    
    <div id="ar5">
      <input type="button" value="a" v-on:keydown="a">
    </div>
    
    var vm = new Vue({
      el:"#ar5",
      data:{
        msg:1
      },
      methods:{
        a:function(e){
          console.log(e.keyCode)
        }
      }
    })
    우 리 는 서로 다른 키 의 키 값 을 얻 을 수 있다.
    결실

    모든 keyCode 를 기억 하 는 것 이 어렵 기 때문에 Vue 는 가장 자주 사용 하 는 버튼 에 별명 을 제공 합 니 다.
  • .enter
  • .tab
  • delete(캡 처"삭제"와"체크 해제"키)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • 물론 다른 키 가 필요 하 다 면 vue.js 도 전역 config.key Codes 대상 을 통 해 키 값 수정자 별명 을 사용자 정의 할 수 있 습 니 다.
    
    //      v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112
    수식 키
    마우스 나 키보드 이벤트 감청 을 다음 수정자 로 열 어 버튼 을 눌 렀 을 때 응답 할 수 있 습 니 다.
  • .ctrl
  • .alt
  • .shift
  • .meta
  • 메모:Mac 시스템 키보드 에서 meta 대응 명령 키(*8984).윈도 시스템 키보드 meta 에서 윈도 우즈 로고 키(8862)에 대응 합 니 다.Sun 운영 체제 키보드 에서 meta 는 옹 골 진 보석 키(◆)에 대응 합 니 다.다른 특정한 키보드,특히 MIT 와 Lisp 키보드 와 그 후속,예 를 들 어 Knight 키보드,space-cadet 키보드,meta 는'META'로 표시 된다.Symbolics 키보드 에 meta 는'META'또는'Meta'로 표 시 됩 니 다.
    예 를 들 면:
    
    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
    수식 키 가 정상 적 인 버튼 보다 다르다;수식 키 가 키 업 이벤트 와 함께 사 용 될 때 이벤트 가 발생 할 때 정상 적 인 버튼 을 눌 러 야 합 니 다.키 up.ctrl 을 유발 하려 면 ctrl 을 눌 렀 을 때 다른 버튼 을 눌 러 야 합 니 다.ctrl 만 방출 하면 사건 이 일어나 지 않 습 니 다.
    마우스 버튼 수정자
    이 수식 부 호 는 처리 프로그램 이 특정한 마우스 버튼 을 감청 하 는 것 을 제한 할 것 이다.
  • .left
  • .right
  • .middle
  • 왜 HTML 에서 사건 을 감청 합 니까?
    당신 은 이러한 사건 감청 방식 이 관심 사 분리(separation of concern)의 전통 이념 에 위배 된다 는 것 을 알 수 있 습 니 다.걱정 하지 마 세 요.모든 Vue.js 이벤트 처리 방법 과 표현 식 이 현재 보기 의 ViewModel 에 엄 격 히 연결 되 어 있 기 때문에 유지 에 어려움 을 주지 않 습 니 다.실제로 v-on 을 사용 하면 몇 가지 장점 이 있다.
    HTML 템 플 릿 을 한 번 훑 어보 면 자 바스 크 립 트 코드 에 대응 하 는 방법 을 쉽게 찾 을 수 있 습 니 다
  • JavaScript 에서 수 동 으로 사건 을 연결 할 필요 가 없 기 때문에 ViewModel 코드 는 매우 순수한 논리 일 수 있 고 DOM 과 완전히 결합 하여 테스트 하기 쉽다
  • 4.567917.ViewModel 이 소각 되면 모든 이벤트 프로세서 가 자동 으로 삭 제 됩 니 다.너 는 어떻게 스스로 그것들 을 정리 할 지 걱정 할 필요 가 없다이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기