在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

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

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

可以通过全局 config.keyCodes 对象自定义键值修饰符别名

/ 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

转载于:https://www.cnblogs.com/jay3352/p/6163405.html

记一下vue.js事件的修饰等问题相关推荐

  1. Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用

    学习Vue.js第三天 键盘事件keyup <label>你所在城市:</label><input type="text" v-on:keyup=&q ...

  2. vue.js 事件的案例以及 v-model 的学习

    这个是事件监听的一个小案例. <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...

  3. Vue.js 事件处理器，医院的胸牌佩戴在哪，给医生护士佩戴赞赏胸牌，对服务质量打分。

    <div id="app"><button v-on:click="counter += 1">增加 1</button>& ...

  4. （12）vue.js 修饰符

    一.vue.js修饰符介绍 修饰符是以点开头的指令后缀,用于给当前指令设置特殊操作. 二.事件修饰符 .prevent 修饰符 用于阻止默认事件行为,相当于 event.preventDefault( ...

  5. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  6. vue.js v-on

    <div id="example-1"><button v-on:click="counter += 1">Add 1</butt ...

  7. 全面掌握前端框架Vue.js

    整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...

  8. Vue.js学习日记03

    Vue.js样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式 class 属性绑定 为 v-bind:class 设置一个对象,从而动态的切 ...

  9. html中的父子通信代码,Vue.js 父子组件通信的十种方式

    面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...

  10. Vue js 实现点击页面空白处隐藏指定div

    Vue js 实现点击页面空白处隐藏指定div <template><!--向页面添加关闭div的事件监听--><div class="page" @ ...

最新文章

  1. python 数据逐个验证_在python中验证数据的最佳方法是什么？
  2. 手把手教你使用Gene6FTP远程管理
  3. asmack xmpp 获取离线消息
  4. 神经信息学整理（1）-神经细胞，MP模型
  5. springboot No Java compiler available for configuration options compilerClassName
  6. Linux学习_菜鸟教程_3
  7. android4.4 hls,Android VideoView直播电视流（HLS）
  8. 吴恩达机器学习总结二：单变量线性回归
  9. SourceAnalysis/Binder源码分析.md
  10. grads插值_GrADS学习资料：第2章 数据处理
  11. 杨玲 徐思 《面向对象程序设计（java）》第十一周学习总结
  12. Vue 接入firebase验证、Google登陆、Facebook登陆完整流程
  13. 未来是现在的将来时，在社科院杜兰金融管理硕士项目酝酿灿烂的明天
  14. 从未改过的网名,一如既往的孤荷凌寒——我的信息技术之路之五
  15. 传奇3国际版 单机假设.说明和下载地址
  16. vc循序渐进实现仿QQ界面（三）：界面调色与控件自绘
  17. 微信支付的服务器配置url超时,微信H5支付商家存在未配置的参数，请联系商家解决的...
  18. 深度分析：一次Wi-Fi入侵实录(1)
  19. 字体图标之Symbol用法
  20. java遍历excel 表格

热门文章

  1. Java第二节课总结
  2. Linux系统负载查询
  3. Java web--过滤器
  4. SQL 语句性能查看
  5. changedate.js
  6. KVM/QEMU桥接网络设置[zz]
  7. Oracle11g最佳培训高清下载版(王二暖Oracle11g教室\10年经验毫无保留)
  8. SSLOJ 1298.网站计划
  9. Git 常用命令 和 安装
  10. document.body