일부 vue 이벤트 수정자를 간략하게 분석하는 기사

이 기사는 Vue의 일부 이벤트 수정자에 대해 주로 설명합니다. 관심 있는 친구가 이 글을 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

프로젝트 개발 중에 vue의 키보드 이벤트를 만났습니다. 다음은 프로젝트의 코드 스니펫입니다.

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

코드 스니펫에는 항상 가 있는 것으로 나타났습니다. naitvie 이후 키보드 이벤트 , 처음에는 이유를 이해하지 못했습니다. 확인한 결과 vue가 @click는 vue로 캡슐화됩니다. 구성 요소의 루트 요소에서 기본 이벤트를 수신하려면 위의 코드 조각 <code>@keyup.enter.native.naitvie，刚开始并不明白是什么原因，查证一番，发现是因为vue 使用的是一套自己的事件传递机制，例如 @click 等事件是经过 vue 封装的。如果想在某个组件的根元素上监听一个原生事件，就要使用 v-on 的修饰符 .native

在上面的代码片段中@keyup.enter 是写在一个封装好的组件上（项目中用的的 iView组件 ），因此，在一些实际上处理 DOM 原生事件的上需要添加额外的标识符.native，如果是直接在input上使用就不需要添加了。

此外，vue 提供了很多的 修饰符。

1、事件修饰符

.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况

注：修饰符可以串联 ,使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

2、按键修饰符

可以直接用keycode，但是较难记全，所以Vue提供 了常用的按键别名

.enter 回车键
.tab 制表空格键
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl .alt .shift .meta

를 사용해야 합니다. / code>는 캡슐화된 컴포넌트(프로젝트에서 사용되는 iView 컴포넌트

)에 작성되므로 실제로 DOM을 처리하는 경우도 있습니다. 추가 식별자 .native를 기본 이벤트에 추가해야 합니다. 입력에서 직접 사용되는 경우 추가할 필요가 없습니다.

또한 vue는 많은 수정자를 제공합니다.

1. 이벤트 수정자

.stop는 클릭 이벤트가 계속 전파되는 것을 방지합니다 .prevent 이벤트를 제출하고 더 이상 페이지를 다시 로드하지 않습니다 .capture 이벤트 리스너를 추가할 때 이벤트 캡처 모드를 사용합니다. 즉, 요소 ​​자체에 의해 트리거된 이벤트가 여기에서 먼저 처리된 다음 처리를 위해 내부 요소로 전달됩니다.self event.target이 현재 요소 자체일 때 핸들러 함수가 실행되는 경우, 즉 내부 요소에서 이벤트가 실행되지 않는 경우에만.once 클릭 이벤트는 한 번만 실행됩니다.passive 스크롤 이벤트 event.preventDefault()

의 경우를 포함하여 기본 동작(예: 스크롤 동작)이 즉시 트리거됩니다.참고:수정자는 언제 연결될 수 있습니다. 수정자를 사용하면 순서가 중요합니다. 해당 코드는 동일한 순서로 생성됩니다. 따라서 @click.prevent.self를 사용하면 모든 클릭이 방지되고, @click.self.prevent는 요소 자체에 대한 클릭만 방지됩니다. 2. 키 수정자

키코드를 직접 사용할 수 있지만 모두 기억하기 어렵기 때문에 Vue는 일반적으로 사용되는 키 별칭을 제공합니다🎜🎜.enter Enter 키 🎜 .tab 탭 스페이스 키 🎜.delete ("삭제" 및 "백스페이스" 키 캡처) 🎜.esc 종료 🎜 . 스페이스 스페이스바 🎜.up 위쪽 키 🎜.down 아래쪽 키 🎜.left 왼쪽 키 🎜 .right 오른쪽 키🎜🎜<strong>3. 시스템 수정자 키</strong>🎜🎜다음 수정자를 사용하여 해당 키를 눌렀을 때만 마우스 또는 키보드 이벤트를 트리거하는 리스너를 구현할 수 있습니다. 🎜🎜<code>.ctrl .alt .shift .meta🎜🎜여기에는 vue 이벤트 중 일부만 나열됩니다. , 수식어에 대한 자세한 소개는 공식 vue 문서를 참조하세요 🎜🎜🎜 매일 조금씩 요약하세요... 매일 조금씩 얻으세요... 매일 조금씩 발전하세요... (＾－＾) 🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜추천 학습: "🎜vue.js 비디오 튜토리얼🎜"🎜🎜

위 내용은 일부 vue 이벤트 수정자를 간략하게 분석하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!