vue事件、阻止事件冒泡等

文章目录

  • 事件冒泡
  • v-on 事件绑定
    • 事件修饰符
    • 按键修饰符![在这里插入图片描述](https://img-blog.csdnimg.cn/20200614075428120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F1ZWxsYTkwMDI=,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200614075406462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F1ZWxsYTkwMDI=,size_16,color_FFFFFF,t_70)
    • 组合按钮

事件冒泡

上级dom 元素和下级dom元素 绑定了相同的事件、触发下级的事件,上级的事件会跟着触发 , 称为冒泡

v-on 事件绑定

v-on:click="fun" 
//简写  @click="fun"

事件修饰符

常用事件修饰符 : 组织冒泡、组织默认行为、等对事件的前置后置处理

// 说明: 点击后 阻止默认事件,执行fun函数,并且防止冒泡
v-on:click.prevent.stop="fun" 

vue事件、阻止事件冒泡等_第1张图片

按键修饰符vue事件、阻止事件冒泡等_第2张图片vue事件、阻止事件冒泡等_第3张图片

组合按钮

vue事件、阻止事件冒泡等_第4张图片

你可能感兴趣的:(前端,vue.js)