内容取自>>

<!-- 阻止单击事件冒泡 -->
<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. FreeBSD 利用IPFW实现限制局域网使用QQ

    QQ服务器分为三类: 1.UDP 8000端口类7个:速度最快,服务器最多.QQ上线会向这7个服务器发送UDP数据包,选择回复速度最快的一个作为连接服务器.这7个服务器名字均以sz-sz7开头,域后缀 ...

  2. python3求200以内能被17整除的最大正整数

    for i in range(200, 17,-1): if(i%17==0): print(i) break

  3. VS code 设置中文语言环境(实现语言切换自由)

    1.打开vs code,然后按快捷键ctrl+shift+p,输入configure language>回车 2.选择Install Additional Languages... 3.在左侧选 ...

  4. spinlock 设计的初衷,当只有单核时是否还需要锁

    自旋锁,的设计初衷是什么,是为了解决什么问题.如果只有一个cpu,并且是单核,那是否还需要用到自旋锁.

  5. vue学习过程总结(06) - vue的数据存储store

    这个不知道能怎么叫不?现在对这块很迷.以下为个人理解 store是状态管理,是一个对象,有其属性和方法. 常见的值有:state/mutations/actions/getters, 这几个值的意思: ...

  6. [源码解析] TensorFlow 分布式环境(5) --- Session

    [源码解析] TensorFlow 分布式环境(5) --- Session 目录 [源码解析] TensorFlow 分布式环境(5) --- Session 1. 概述 1.1 Session 分 ...

  7. 数据结构-二叉树、B树、B+树、B*树(整理版)

    1. 二叉树 二叉树的特点: ① 所有非叶子节点至多拥有两个儿子(Left和Right): ② 所有节点存储一个关键字: ③ 非叶子节点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: ...

  8. SpringMvc用什么对象从后台向前台传递数据的?

    通过ModelMap对象,可以在这个对象里面调用put方法,把对象加到里面,前台就可以通过el表达式拿到.

  9. 请说说你对Hibernat的理解?JDBC和Hibernate各有什么优势和劣势?

    Hibernate是一个轻量级的持久层开源框架,它是连接Java应用程序和关系数据库的中间件,负责Java对象和关系数据之间的映射.Hibernate内部对JDBC API进行了封装,负责Java对象 ...

  10. Postgres数据库知识点

    1.批量插入: test_list = []for i in range(100): test_list.append(models.Testmodel(name=i, message="{ ...