内容取自>>

<!-- 阻止单击事件冒泡 -->
<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. office online在线预览服务与https的tls证书兼容问题

    问题现象:k8s环境配置证书后,无法调用office online 服务,附件无法预览 问题原因:ingress默认启用得是tls1.2,不兼容以下版本 k8s环境解决方法:增加ingress配置,兼 ...

  2. Windows 8下完美使用Virtual PC 2007(virtual pc 2007 64 win8 兼容性)

    Windows 8下完美使用Virtual PC 2007(virtual pc 2007 64 win8 兼容性) 一.从微软的官方网站下载Virtual PC 2007 SP1英文版,文件名为se ...

  3. NET程序的代码混淆、加壳与脱壳

    通常我们通过代码混淆.加密的形式达到软件保护的目的.在Web开发里我们接触过的可能就是JS代码加密了,可以通过对JS代码进行混淆.加密从而实现对核心JS代码的保护.如果没有接触过的可以在这里简单了解一 ...

  4. Spring Cloud Alibaba 之 Nacos

    Nacos 技术讲解 一提到分布式系统就不的不提一下 CAP 原则 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,一致性(Consistency).可用性(Availability ...

  5. bzoj3144 [HNOI2013]切糕(最小割)

    bzoj3144 [HNOI2013]切糕(最小割) bzoj Luogu 题面描述见上 题解时间 一开始我真就把这玩意所说的切面当成了平面来做的 事实上只是说相邻的切点高度差都不超过 $ d $ 对 ...

  6. 什么是 Apache Kafka?

    Apache Kafka 是一个分布式发布 - 订阅消息系统.它是一个可扩展的,容错的 发布 - 订阅消息系统,它使我们能够构建分布式应用程序.这是一个 Apache 顶 级项目.Kafka 适合离线 ...

  7. List和 Map区别?

    一个是存储单列数据的集合,另一个是存储键和值这样的双列数据的集合,List中存储的数据是有顺序,并且允许重复:Map中存储的数据是没有顺序的,其键是不能重复的,它的值是可以有重复的.

  8. OOP 中的 组合、聚合和关联有什么区别?

    如果两个对象彼此有关系,就说他们是彼此相关联的.组合和聚合是面向对象中 的两种形式的关联.组合是一种比聚合更强力的关联.组合中,一个对象是另一 个的拥有者,而聚合则是指一个对象使用另一个对象.如果对象 ...

  9. HTML 5中不同的新表单元素类型是什么?

    HTML 5推出了10个重要的新的表单元素: Color. Date Datetime-local Email Time Url Range Telephone Number Search

  10. hadoop 分布式系统与Hadoop MapReduce

    Hadoop分为两部分 Hadoop MapReduce和Hadoop分布式文件系统 1分布式系统由Master Node 和多台 slave Node组成. 1.1MasterNode Master ...