通过v-on
绑定事件,也可以简写为@
事件被触发时执行的内联js语句
vue<button v-on:click='numbers++'></button> <button @click='numbers++'></button>
接受一个组件内定义的方法名或对某个方法的调用,自动接受原生DOM事件并触发执行
vue<script lang='ts'> ... let userinfos1 = ref([1,2,3]) const changeuserinfos1 = ()=>{ userinfos1.value=[3,4,5] } </script> <template> <p @click="changeuserinfos1">{{ userinfos1 }}</p> </template>
对于原生DOM事件需要手动标注类型
vue<script lang='ts'> ... let userinfos1 = ref([1,2,3]) /* (parameter) target: any 参数“target”隐式具有“any”类型 const changeuserinfos1 = (target)=>{ userinfos1.value=[3,4,5]; console.log('target', target) } */ const changeuserinfos1 = (target: MouseEvent)=>{ userinfos1.value=[3,4,5]; console.log('target', target) } </script> <template> <p @click="changeuserinfos1">{{ userinfos1 }}</p> </template>
tsinterface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
"article": HTMLElement;
"aside": HTMLElement;
"audio": HTMLAudioElement;
"b": HTMLElement;
"base": HTMLBaseElement;
"bdi": HTMLElement;
"bdo": HTMLElement;
"blockquote": HTMLQuoteElement;
"body": HTMLBodyElement;
"br": HTMLBRElement;
"button": HTMLButtonElement;
"canvas": HTMLCanvasElement;
"caption": HTMLTableCaptionElement;
"cite": HTMLElement;
"code": HTMLElement;
"col": HTMLTableColElement;
"colgroup": HTMLTableColElement;
"data": HTMLDataElement;
"datalist": HTMLDataListElement;
"dd": HTMLElement;
"del": HTMLModElement;
"details": HTMLDetailsElement;
"dfn": HTMLElement;
"dialog": HTMLDialogElement;
"dir": HTMLDirectoryElement;
"div": HTMLDivElement;
"dl": HTMLDListElement;
"dt": HTMLElement;
"em": HTMLElement;
"embed": HTMLEmbedElement;
"fieldset": HTMLFieldSetElement;
"figcaption": HTMLElement;
"figure": HTMLElement;
"font": HTMLFontElement;
"footer": HTMLElement;
"form": HTMLFormElement;
"frame": HTMLFrameElement;
"frameset": HTMLFrameSetElement;
"h1": HTMLHeadingElement;
"h2": HTMLHeadingElement;
"h3": HTMLHeadingElement;
"h4": HTMLHeadingElement;
"h5": HTMLHeadingElement;
"h6": HTMLHeadingElement;
"head": HTMLHeadElement;
"header": HTMLElement;
"hgroup": HTMLElement;
"hr": HTMLHRElement;
"html": HTMLHtmlElement;
"i": HTMLElement;
"iframe": HTMLIFrameElement;
"img": HTMLImageElement;
"input": HTMLInputElement;
"ins": HTMLModElement;
"kbd": HTMLElement;
"label": HTMLLabelElement;
"legend": HTMLLegendElement;
"li": HTMLLIElement;
"link": HTMLLinkElement;
"main": HTMLElement;
"map": HTMLMapElement;
"mark": HTMLElement;
"marquee": HTMLMarqueeElement;
"menu": HTMLMenuElement;
"meta": HTMLMetaElement;
"meter": HTMLMeterElement;
"nav": HTMLElement;
"noscript": HTMLElement;
"object": HTMLObjectElement;
"ol": HTMLOListElement;
"optgroup": HTMLOptGroupElement;
"option": HTMLOptionElement;
"output": HTMLOutputElement;
"p": HTMLParagraphElement;
"param": HTMLParamElement;
"picture": HTMLPictureElement;
"pre": HTMLPreElement;
"progress": HTMLProgressElement;
"q": HTMLQuoteElement;
"rp": HTMLElement;
"rt": HTMLElement;
"ruby": HTMLElement;
"s": HTMLElement;
"samp": HTMLElement;
"script": HTMLScriptElement;
"section": HTMLElement;
"select": HTMLSelectElement;
"slot": HTMLSlotElement;
"small": HTMLElement;
"source": HTMLSourceElement;
"span": HTMLSpanElement;
"strong": HTMLElement;
"style": HTMLStyleElement;
"sub": HTMLElement;
"summary": HTMLElement;
"sup": HTMLElement;
"table": HTMLTableElement;
"tbody": HTMLTableSectionElement;
"td": HTMLTableDataCellElement;
"template": HTMLTemplateElement;
"textarea": HTMLTextAreaElement;
"tfoot": HTMLTableSectionElement;
"th": HTMLTableHeaderCellElement;
"thead": HTMLTableSectionElement;
"time": HTMLTimeElement;
"title": HTMLTitleElement;
"tr": HTMLTableRowElement;
"track": HTMLTrackElement;
"u": HTMLElement;
"ul": HTMLUListElement;
"var": HTMLElement;
"video": HTMLVideoElement;
"wbr": HTMLElement;
}
事件修饰符名称 | 用途 |
---|---|
.stop | 阻止事件的冒泡行为 |
.prevent | 阻止元素的默认行为(如a 标签默认点击跳转行为) |
.self | 只有在event.target 是当前元素自身时触发处理函数 |
.once | 事件只会触发一次 |
'.passive' | 事件只会在捕获阶段触发 |
'.`passive' | 不拦截默认事件 |
在滚动监听@scoll,@touchmove
时,每次都使用内核线程查询prevent会使滑动卡顿,使用.passive 修饰符跳过内核线程查询,可以大大提高流畅度。参考
vue<!-- 仅在 `key` 为 `Enter`(回车符) 时调用 `change` --> <input @keyup.enter="change" />
.enter
回车键.tab
Tab
键.delete
(捕获“Delete”和“Backspace”两个按键).esc
左上角Esc
按键.space
空格键.up
小键盘上方向键.down
小键盘下方向键.left
小键盘左方向键.right
小键盘右方向键.left
鼠标左键.right
鼠标右键.middle
鼠标滚轮键下按本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!