메소드 프로세서
V-ON 명령을 사용하여 DOM 이벤트를들을 수 있습니다.
<div id = "example"> <button v-on : 클릭 = "greet"> greet </button> </div>
클릭 이벤트 처리기를 메소드 인사말에 바인딩합니다. 다음은 VUE 인스턴스에 정의 된 메소드입니다.
var vm = new vue ({el : '#example', data : {name : 'vue.js'}, // 'method'객체 : {greet : function (event) {//``hello ' + this.name +'! ') 메소드에서``hello' + this.name + ') }}) // javaScript 코드에서 vm.greet ()를 호출 할 수도 있습니다. //-> 'hello vue.js!'직접 테스트하십시오
인라인 명령문 프로세서
메소드에 직접 바인딩하는 것 외에도 인라인 JavaScript 문을 사용할 수도 있습니다.
<div id = "example-2"> <button v-on : 클릭 = "say ( 'hi')"> say hi </button> <button v-on : "say ( 'what')"> say </button> </div>
new vue ({el : '#example-2', method : {say : function (msg) {alert (msg)}})인라인 표현식과 유사하게 이벤트 핸들러는 하나의 명령문으로 제한됩니다.
때로는 인라인 명령문 프로세서에서 기본 DOM 이벤트에 액세스해야합니다. Special Variable $ 이벤트를 사용하여 메소드로 전달할 수 있습니다.
<버튼 V- 온 : 클릭 = "say ( 'hello!', $ event)"> 제출 </button>
// ... 메소드 : {say : function (msg, event) {// 이제 기본 이벤트 객체에 액세스 할 수 있습니다 .preventDefault ()}}이벤트 수정 자
이벤트 프로세서에서 event.preventDefault () 또는 event.stopPropagation ()이 종종 필요합니다. 메소드 내에서 쉽게 수행 할 수는 있지만 DOM 이벤트 세부 정보를 처리하지 않고 메소드를 순수한 데이터 로직으로 만드는 것이 좋습니다.
이 문제를 해결하기 위해 vue.js는 v-on에 두 가지 이벤트 수정 자의 .prevent 및 .stop을 제공합니다. 수정자가 도트로 시작하는 명령 접미사라는 것을 기억하십니까?
<!-버블 링-> <a v-on : click : "dothis"> </a> <!-제출 이벤트 제출 이벤트는 더 이상 페이지를 과부하시키지 않습니다-> <form v-on : submit.prevent = "onsubmit"> </form> <!-수정자는 voN :> <! <! <! <! <! <! <! <! v-on : 제출 .prevent> </form>
1.0.16 추가 수정자가 추가되었습니다.
<!-이벤트 리스너를 추가 할 때 캡처 모드 사용-> <div v-on : click.capture = "dothis"> ... </div> <!-콜백은 이벤트가 요소 자체에서 트리거 될 때만 트리거됩니다 (하위 요소가 아님)-> <div v-on : click.self = "dothat"> ... </div.
키 수정 자
키보드 이벤트를들을 때는 종종 키 코드를 감지해야합니다. vue.js는 v-on에 키 수정자를 추가 할 수 있습니다.
<!-vm.submit ()는 키 코드가 13 인 경우에만 호출됩니다.> <input v-on : keyup.13 = "제출">
모든 키 코드는 어렵다는 점을 기억하십시오. vue.js는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니다.
<!-위와 동일-> <input v-on : keyup.enter = "제출"> <!-약어 구문-> <input @keyup.enter = "제출">
모든 주요 별칭 :
•입력하다
•꼬리표
•삭제
• ESC
•공간
•위로
•아래에
•왼쪽
•오른쪽
1.0.8+ : 단일 레터 키 별칭을 지원합니다.
1.0.17+ : 주요 별칭을 사용자 정의 할 수 있습니다.
// @keyup.f1vue.directive ( 'on'). keycodes.f1 = 112를 사용할 수 있습니다
HTML에서 이벤트를 듣는 이유는 무엇입니까?
이러한 종류의 이벤트 모니터링 방법이 "관심 분리"라는 전통적인 개념에 위배된다는 것을 알았을 것입니다. 모든 vue.js 이벤트 처리 방법 및 표현이 현재보기의 뷰 모델에 엄격하게 구속되므로 유지 보수 어려움을 일으키지 않기 때문에 걱정하지 마십시오. 실제로 V-ON을 사용하는 데 몇 가지 이점이 있습니다.
1. HTML 템플릿을 스캔하면 JavaScript 코드에서 해당 메소드를 쉽게 찾을 수 있습니다.
2. JavaScript에서 이벤트를 수동으로 바인딩 할 필요가 없기 때문에 ViewModel 코드는 매우 순수한 논리 일 수 있으며 DOM에서 완전히 분리되어 테스트하기가 더 쉽습니다.
3. 뷰 모델이 파괴되면 모든 이벤트 프로세서가 자동으로 삭제됩니다. 직접 청소하는 방법에 대해 걱정할 필요가 없습니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.