vue常用时间修饰符记录

1、stop:阻止冒泡

  如下:正常情况下,我们点击最内层的inner_inner的时候,事件会向上冒泡,inner 和outer也会执行。我们在inner_inner事件加上.stop修饰符,就会阻止事件向上冒泡,功能等价于原来的event.stopPropagation()

Out
Inner
inner inner

2、prevent:阻止默认事件

  如下,我们有一个a标签,href指向baidu网址,当我们点击a标签时,执行clickA后,会继续执行默认的跳转事件。我们添加了.prevent修饰符后,就会阻止它的默认事件。功能等价于event.preventDefault()

3、self:只有自身执行

  self的作用时,只有点击自身的时候,才会执行,其他的触发(如冒泡啥的)都不会执行

  如下:只有点击Inner div自身的时候,才会执行inner(),点击inner_inner的时候,会冒泡,但是不会被捕获执行

Out
Inner
inner inner

4、capture:捕获冒泡

  当有冒泡事件时,会最先捕获并执行,所以点击inner_inner时,下面的执行顺序是outer--->inner_inner---->inner

Out
Inner
inner inner

5、once:只执行一次

  这里点击Add num加1,给click事件添加了once修饰符后,事件只会执行一次,再次点击不再执行addOne方法。

6、native:

  当想要给组件的根元素绑定事件的时候,可以使用native修饰符

  如下,在父组件中调用my-button子组件,定义了click事件,我们都知道在my-button组件中,如果触发父组件定义的事件,是可以执行的,但是我们不想在子组件中触发,希望在父组件中监听这个点击事件,可以给click事件添加.native修饰符



Vue.component("my-button",{
    template:""
});

你可能感兴趣的:(vue常用时间修饰符记录)