Vue.js 메소드 및 이벤트 소개

이 글은 Vue.js 메소드와 이벤트에 대한 소개를 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

메소드 및 이벤트

@click이 호출한 메소드 이름 뒤에 대괄호()가 올 필요가 없습니다. 메소드에 매개변수가 있는 경우 기본 이벤트 객체 이벤트가 기본적으로 전달됩니다.

HTML 요소에서 이벤트를 모니터링하는 이러한 디자인은 DOM과 JavaScript를 긴밀하게 결합하는 것처럼 보이며 이는 분리 원칙을 위반하지만 실제로는 정반대입니다. HTML을 통해 어떤 메소드가 호출되는지 알 수 있으므로 DOM에서 로직을 분리하고 유지 관리가 용이합니다.

가장 중요한 점은 viewModel이 소멸되면 모든 이벤트 핸들러가 자동으로 소멸되므로 직접 처리할 필요가 없다는 것입니다.

Vue는 기본 DOM 이벤트에 액세스하기 위한 특수 변수 $event를 제공합니다.

<div id="app">
    <a href="https://www.apple.com/" @click="handleClick(&#39;禁止打开&#39;,$event)">打开链接</a>
</div>

E 符 장식 폐허

Vue는 다음 수정자를 지원합니다:

.stop

.prevent

.capture

.Self.once

구체적인 사용법은 다음과 같습니다.

클릭 이벤트가 버블링되는 것을 방지합니다. <a @click.stop="handle"></a>이벤트를 제출해도 더 이상 페이지가 다시 로드되지 않습니다<form @submit.prevent=" 핸들"></form>

	<a @click.stop="handle"></a>
提交事件不再重载页面	<form @submit.prevent="handle"></form>
修饰符可以串联	<a @click.stop.prevent="handle"></a>
只有修饰符	<form @submit.prevent></form>
添加事件侦听器时使用事件捕获模式	<p @click.capture="handle">...</p>
只当事件在该元素本身（不是子元素）触发时执行回调	<p @click.self="handle">...</p>
只触发一次，组件同样适用	<p @click.once="handle">...</p>

在表单元素上监听键盘事件时，还可以使用按键修饰符。

<a @click.stop.prevent="handle"></a>

修饰符功能	使用示例
只有在keyCode是13时调用vm.submit()	<input @keyup.13="submit">수정자는 연결될 수 있습니다

수정자만

<form @submit.prevent></form>

이벤트 수신 추가 이벤트 캡처 모드 사용

<p @click. Capture="handle">...</p>

이벤트가 요소 자체(하위 요소 아님)에 있을 때만 트리거됩니다

<p @click .self="handle">...</p>

은 한 번만 트리거되며 구성요소에도 동일하게 적용됩니다

...

양식 요소에서 키보드 이벤트를 수신할 때 키 수정자를 사용할 수도 있습니다.

수정자 함수

사용 예🎜🎜🎜🎜🎜🎜keyCode가 13 >🎜인 경우에만 vm.submit()를 호출하세요. 🎜<input @keyup.13="submit">🎜🎜🎜🎜🎜특정 keyCode 외에도 Vue는 몇 가지 단축키 이름도 제공합니다: 🎜🎜.enter🎜🎜 .tab🎜🎜 .delete("삭제" 및 "백스페이스" 키 보충) 🎜🎜.esc🎜🎜.space🎜🎜.up🎜🎜.down🎜🎜.left🎜🎜.right🎜🎜이 키 수정자는 다음에서도 사용할 수 있습니다. 조합 또는 마우스 사용: 🎜🎜.ctrl🎜🎜.alt🎜🎜.shift🎜🎜.meta🎜🎜이 기사는 여기에서 끝났습니다. php의 🎜JavaScript 비디오 튜토리얼🎜 열을 따르세요. 중국사이트! ! ! 🎜

위 내용은 Vue.js 메소드 및 이벤트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!