记一下vue.js事件的修饰等问题
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
|
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self
会阻止所有的点击,而 @click.self.prevent
只会阻止元素上的点击。
在监听键盘事件时,我们经常需要监测常见的键值。Vue 允许为 v-on
在监听键盘事件时添加关键修饰符:
<!-- 同上 -->记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
|
全部的按键别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes
对象自定义键值修饰符别名
记一下vue.js事件的修饰等问题的更多相关文章
- vue.js事件,属性,以及交互
这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...
- vue.js实战——.native修饰符
https://blog.csdn.net/qq_29468573/article/details/80771625 除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时可以用.nati ...
- vue.js事件传值之子组件传向父组件以及$emit的使用
在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...
- Vue.js:事件处理器
ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- (私人收藏)Vue.js手册及教程
(私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- C#读取OPC server
1.安装opc server https://blog.csdn.net/yhtppp/article/details/80676118 2.c#读取opc https://github.com/le ...
- 我们一起踩过的坑----react(antd)(一)
1.}] && ){ ){ ){ ||){ ){ );); , }; }); }, beforeUpload: (file) => { ...
- intelliJ idea如何安装、配置
https://www.cnblogs.com/jajian/p/7989032.html
- EasyUI ComboGrid 笔记(支持分页)
业务要求: 下拉框做选择时需要展现多个字段供用户参考,由于内容可能会很多,故还需要考虑分页. 解决方案: 由于项目整体已经采用了EasyUI,在浏览了demo以后,初步考虑使用EasyUI的combo ...
- mysql系列博客
近期,打算开始我的sql之路了,计划写一些sql方面的博客,初步定的计划,先写mysql,如果有必要,再写oracle.mysql如下: 1.mysql的调优思路 2.mysql 的执行过程 http ...
- return this 和return * this
this是指向自身对象的指针,*this是自身对象. 也就是说return *this返回的是当前对象的克隆或者本身(若返回类型为A, 则是克隆, 若返回类型为A&, 则是本身 ). retu ...
- SQL Injection-Http请求的参数中对特殊字符的处理
1.背景:最近学习webgoat到了SQL Injection的这一课,要完成这一课需要拦截Http请求,修改参数,不过在修改的参数中加入特殊字符才能完成.下面让我们一起来学习吧. 2.题目: 大致翻 ...
- MySQL学习入门安装和启动及常见问题解决方法(一)
1.下载MySQL 官网地址:https://www.mysql.com/downloads/ 2.个人学习使用,只有下面这个是免费的 3.下载之后解压到目录中,并加入环境变量,如下 创建MYSQL_ ...
- 博客七----tensorflow-gpu安装满满填坑
具体内容见我的开源中国教程:https://my.oschina.net/u/3770644/blog/3043073 因为编写习惯原因,我的大多数详细教程在开源中国中.有兴趣的大家打开连接就好 强调 ...
- 支付宝app对接的坑
主要流程是: 1.申请成为开发者 2.创建应用 3.设置应用公钥/私钥/支付宝公钥 4.制作服务器端代码(此处注意,不要解析htmlencode) https://blog.csdn.net/zzzi ...