Vue.js에서는 v-on 지시어를 통해 이벤트 리스너를 태그에 바인딩할 수 있습니다. 구문은 v-on:<event-name>="handler"입니다. 이는 이벤트 이름, 이벤트 수정자 및 동적 이벤트 지정을 지원합니다. 이름.
Vue.js의 태그 바인딩 이벤트
Vue.js에서는 v-on
지시문을 통해 이벤트 리스너를 HTML 태그에 바인딩할 수 있습니다. v-on
지시문의 구문은 다음과 같습니다. v-on
指令为 HTML 标签绑定事件侦听器。v-on
指令的语法为:
<code>v-on:<event-name>="handler"</code>
其中:
<event-name>
是要绑定的事件名称,如 click
、hover
或 keydown
。handler
是一个方法,当事件触发时将会被调用。绑定特定事件
以下是如何绑定特定事件:
<code class="html"><button v-on:click="handleClick">按钮</button></code>
当用户点击按钮时,handleClick
方法将会被调用。
绑定事件修饰符
Vue.js 提供了事件修饰符,用于修改事件行为:
.stop
:阻止事件冒泡。.prevent
:阻止浏览器的默认行为。.capture
:在捕获阶段而不是冒泡阶段侦听事件。.self
:仅在事件目标与绑定元素相同时触发。.once
:仅触发一次事件。绑定多个事件
可以通过逗号分隔多个事件名称来绑定多个事件:
<code class="html"><input v-on:keyup.enter="submitForm"></code>
这将在用户按 Enter 键时提交表单。
绑定动态事件名称
可以通过变量或表达式来动态绑定事件名称:
<code class="html"><button v-on:[eventName]="handler">按钮</button></code>
其中 eventName
<code class="html"><script> export default { data() { return { eventName: 'click' } } } </script></code>
<event-name>
는 이벤트의 이름입니다. 클릭
, hover
또는 keydown
과 같은 범위입니다. handler
는 이벤트가 트리거될 때 호출되는 메서드입니다. <code class="html"><template> <button v-on:[eventName]="handler">按钮</button> </template></code>
handleClick
메서드가 호출됩니다. 🎜🎜🎜Bind 이벤트 수정자🎜🎜🎜Vue.js는 이벤트 동작 수정을 위한 이벤트 수정자를 제공합니다. 🎜.stop
: 이벤트 버블링을 방지합니다. .prevent
: 브라우저의 기본 동작을 방지합니다. .capture
: 버블링 단계 대신 캡처 단계에서 이벤트를 수신합니다. .self
: 이벤트 대상이 바인딩된 요소와 동일한 경우에만 트리거됩니다. .once
: 이벤트가 한 번만 실행됩니다. eventName
은 다음과 같은 동적 값일 수 있습니다. 🎜rrreeerrreee🎜이것은 버튼은 eventName으로 지정된 이벤트에 바인딩됩니다. 🎜위 내용은 vue의 태그에 이벤트를 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!