内容取自>>

<!-- 阻止单击事件冒泡 -->
<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 - 事件处理之事件修饰符的更多相关文章

  1. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  2. 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  4. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  5. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  7. 黑马vue---13、事件修饰符的介绍

    黑马vue---13.事件修饰符的介绍 一.总结 一句话总结: .stop 阻止冒泡:input type="button" value="戳他" @click ...

  8. vue.js(5)--事件修饰符

    vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...

  9. vuejs基础-事件修饰符

    事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事 ...

随机推荐

  1. Docker——概述

    出现原因:开发接替运维的工作,将jar包连同(mysql,jdk)等环境上线 实现:java -> jar(环境) -> 打包项目带上环境(镜像) -> (Docker仓库:商店) ...

  2. RabbitMQ Go客户端教程4——路由

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第四篇--路由. 这些教程涵盖了使用RabbitMQ创建消息传递应用程 ...

  3. 74CMS 3.0 存储型XSS漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.0源代码编辑使用GBK编 ...

  4. 加速度传感器(MPA1064A)实测---LOTO虚拟示波器

    加速度传感器(MPA1064A)实测---LOTO虚拟示波器 客户提供了一个加速度传感器,型号是MPA1064A,我们帮助客户测试下是否能测到传感器的输出,验证下测试方案.传感器很小巧,带了一根很长的 ...

  5. mycat的基本介绍 看这一篇就够了

    1.前置知识 1.分布式系统 ​ 分布式系统是指其组件分布在网络上,组件之间通过传递消息进行通信和动作协调的系统.它的核心理念是让多台服务器协同工作,完成单台服务器无法处理的任务,尤其是高并发或者大数 ...

  6. 两天入门SolidWorks2016

    视频:https://www.bilibili.com/video/BV1ub411c7ct 饭前甜点--基本设置 一.界面设置 1.1 调出文件栏 打开SOLIDWORKS 2016 x64 Edi ...

  7. 无刷电调修理方法 | 银燕(EMAX)12A无刷电调维修

    一. 银燕(XP-12A)电调修理 笔者的电调在使用4S电池时烧毁,其中一个PMOS管明显烧焦. 将其拆除,买来新元件重新焊接,通电依然冒烟了. 引脚定义 丝印662F: XC6206P332MR 低 ...

  8. 12.19 file 与io流

    12.19 file与io流 File 1. 新建文件或者文件夹 新建文件 File F = new File(pathname:"路径+文件名");Boolean flag = ...

  9. MybatisPlus 多租户的常见问题

    mybatis plus :https://mp.baomidou.com/guide/interceptor-tenant-line.html 如果最终执行的sql出现select查询没有租户ID, ...

  10. Oracle入门基础(三)一一单行函数

    SQL> --字符函数 SQL> select lower('Hello World') 转小写,upper('Hello World') 转大写,initcap('hello world ...