vue常用修饰符

1.事件修饰符

vue为v-on提供了事件修饰符,通过点(.)表示的指令后缀来调用修饰符。

.stop

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

.prevent

防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播),等同于JavaScript中的event.preventDefault(),prevent等同于JavaScript的event.preventDefault(),用于取消默认事件。

.capture

与事件冒泡的方向相反,事件捕获由外到内,捕获事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从外至内 父节点-》子节点的点击事件

.self

只会触发自己范围内的事件,不包含子元素

.once

只执行一次,如果我们在@click事件上添加.once修饰符,只要点击按钮只会执行一次。

.passive

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符

 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

事件修饰符还可以串联

:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。


2.键盘修饰符

在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:

.enter:回车键

.tab:制表键

.delete:含delete和backspace键

.esc:返回键

.space: 空格键

.up:向上键

.down:向下键

.left:向左键

.right:向右键


3.系统修饰键

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

.ctrl

.alt

.shift

.meta

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

鼠标按钮修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有:

.left

.right

.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名。

4.修饰符

(1).lazy

在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)

(2).number

将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)

(3).trim

自动过滤用户输入的首尾空格

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 8,708评论 0 25
  • 一. Vue 实例 以后你可以在 API 参考中查阅到完整的实例属性和方法的列表。 实例生命周期钩子 比如 cre...
    兔子___阅读 2,707评论 0 0
  • 为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录...
    强哥科技兴阅读 4,088评论 0 1
  • 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫啥名字) 一、表单修饰符...
    alanwhy阅读 4,472评论 0 2
  • 两姓联姻,一堂缔约,良缘永结,匹配同称。看此日桃花灼灼,宜室宜家,卜他年瓜瓞绵绵,尔昌尔炽。谨以白头之约,书向鸿笺...
    Juvenile_Li阅读 4,613评论 0 1

友情链接更多精彩内容