Vue.JS 입문 튜토리얼 이벤트 모니터링

v-on 지시문을 사용하여 DOM 이벤트를 바인딩하고 수신할 수 있습니다. 바인딩의 내용은 현재 인스턴스의 메서드(뒤에 괄호가 올 필요 없음) 또는 인라인 표현식일 수 있습니다. 메소드가 제공되면 기본 DOM 이벤트가 첫 번째 매개변수로 전달되고 이 이벤트는 이벤트를 트리거한 해당 ViewModel을 가리키는 targetVM 속성을 갖게 됩니다.

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</a>
</div>

new Vue({
el: '#demo',
data: {
 n: 0
},
methods: {
 onClick: function (e) {
 console.log(e.targetVM.n);
 console.log(e.target.tagName);// "A"
 console.log(e.targetVM === this);// true
 }
}
});

표현식 실행

v-repeat에서 v-on을 사용할 때 targetVM은 유용합니다. v-repeat는 많은 수의 하위 ViewModel을 생성하기 때문입니다. 그러나 다음 표현식을 실행하여 현재 ViewModel 데이터 객체를 나타내는 별칭을 전달하는 것이 더 편리하고 직관적입니다.

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit(&#39;hello!&#39;, $event)">Submit</button>
</ul>

new Vue({
el: '#list',
data: {
 items: [
 { text: 'one', done: true },
 { text: 'two', done: false }
 ]
},
methods: {
 toggle: function (item) {
 console.info(item.done);
 item.done = !item.done;
 console.info(item.done);
 },
 submit: function (msg, e) {
 e.stopPropagation();
 console.info(msg + ' submit is called!');
 }
}
})

표현식 이벤트에서 원본 DOM에 액세스하려는 경우 $event 매개변수를 전달할 수 있습니다.

키 필터
키보드 이벤트를 수신할 때 일반적으로 사용되는 키 코드를 결정해야 하는 경우가 많습니다. Vue.js는 v-on 지시문: 키에만 사용할 수 있는 특수 필터를 제공합니다. 키 코드를 나타내는 매개변수를 수신하고 판단을 완료합니다.

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
<input v-on="keyup:mySubmit | key 13">

시스템에는 사용할 수 있는 많은 기본값이 있습니다. 예:

<!-- 效果同上 -->
<input v-on="keyup:submit | key &#39;enter&#39;">

기본값 is: Enter tab delete esc up down left right space

HTML에서 리스너를 사용하는 이유
이벤트 청취의 전체 방식이 "관심사 분리"라는 전통적인 개념에 어긋난다는 것을 알 수 있습니다. 걱정하지 마십시오. 모든 Vue.js 이벤트 핸들러와 표현식은 현재 뷰의 ViewModel에 엄격하게 바인딩되어 있으므로 유지 관리에 어려움이 발생하지 않습니다. 실제로 v-on을 사용하면 더 많은 이점이 있습니다.

HTML 템플릿의 JS 코드에서 해당 메서드 구현을 쉽게 찾을 수 있습니다.
JS에서는 이벤트를 수동으로 바인딩할 필요가 없기 때문에 ViewModel 코드는 DOM에서 완전히 분리된 매우 순수한 로직이 될 수 있습니다. 테스트하기가 더 쉬울 것입니다.
ViewModel이 삭제되면 모든 이벤트 리스너가 자동으로 제거됩니다. 직접 청소하는 것에 대해 걱정할 필요가 없습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다