vue3 - 事件处理之事件修饰符

<!-- 阻止单击事件冒泡 -->
<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 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
vue3 - 事件处理之事件修饰符的更多相关文章
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
- 黑马vue---13、事件修饰符的介绍
黑马vue---13.事件修饰符的介绍 一.总结 一句话总结: .stop 阻止冒泡:input type="button" value="戳他" @click ...
- vue.js(5)--事件修饰符
vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...
- vuejs基础-事件修饰符
事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事 ...
随机推荐
- Docker——概述
出现原因:开发接替运维的工作,将jar包连同(mysql,jdk)等环境上线 实现:java -> jar(环境) -> 打包项目带上环境(镜像) -> (Docker仓库:商店) ...
- RabbitMQ Go客户端教程4——路由
本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第四篇--路由. 这些教程涵盖了使用RabbitMQ创建消息传递应用程 ...
- 74CMS 3.0 存储型XSS漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.0源代码编辑使用GBK编 ...
- 加速度传感器(MPA1064A)实测---LOTO虚拟示波器
加速度传感器(MPA1064A)实测---LOTO虚拟示波器 客户提供了一个加速度传感器,型号是MPA1064A,我们帮助客户测试下是否能测到传感器的输出,验证下测试方案.传感器很小巧,带了一根很长的 ...
- mycat的基本介绍 看这一篇就够了
1.前置知识 1.分布式系统 分布式系统是指其组件分布在网络上,组件之间通过传递消息进行通信和动作协调的系统.它的核心理念是让多台服务器协同工作,完成单台服务器无法处理的任务,尤其是高并发或者大数 ...
- 两天入门SolidWorks2016
视频:https://www.bilibili.com/video/BV1ub411c7ct 饭前甜点--基本设置 一.界面设置 1.1 调出文件栏 打开SOLIDWORKS 2016 x64 Edi ...
- 无刷电调修理方法 | 银燕(EMAX)12A无刷电调维修
一. 银燕(XP-12A)电调修理 笔者的电调在使用4S电池时烧毁,其中一个PMOS管明显烧焦. 将其拆除,买来新元件重新焊接,通电依然冒烟了. 引脚定义 丝印662F: XC6206P332MR 低 ...
- 12.19 file 与io流
12.19 file与io流 File 1. 新建文件或者文件夹 新建文件 File F = new File(pathname:"路径+文件名");Boolean flag = ...
- MybatisPlus 多租户的常见问题
mybatis plus :https://mp.baomidou.com/guide/interceptor-tenant-line.html 如果最终执行的sql出现select查询没有租户ID, ...
- Oracle入门基础(三)一一单行函数
SQL> --字符函数 SQL> select lower('Hello World') 转小写,upper('Hello World') 转大写,initcap('hello world ...