修饰词：.prevent、.stop、.capture与.self

修饰词：.prevent、.stop、.capture与.self

Event.preventDefault:
可阻止时间执行其默认功能：例如：
阻止想submit这样子，本身带有功能的属性，使其本身功能失效！
另一种失效的方法是return false，效果同上！
Event.stopPropagation:
允许事件的默认功能发生，但阻止事件传播

<div @click.prevent="click1">
    	<div @click.stop="click2">click</div>
</div>

Click1的对应的函数会执行，click2的对应的函数不会被执行
.capture与.self

<div id="app">
        <div  @click="div1">
            <div  @click="div2">
                <div  @click="div3">
                    <div @click="div4">
                        click
                    </div>
                </div>
            </div>
        </div>
    </div>

methods: {
     div1:function(){
       console.log('div1');
     },
     div2:function(){
      console.log('div2');
    },
    div3:function(){
      console.log('div3');
    },
    div4:function(){
      console.log('div4');
    },
    }

当点击click的时候，console.log顺序为：

Div4,div3,div2,div1;

添加：.self

<div id="app">
        <div  @click="div1">
            <div  @click.self="div2">
                <div  @click.self="div3">
                    <div @click="div4">
                        click
                    </div>
                </div>
            </div>
        </div>
    </div>

结果为：div4,div1
添加：.capture

<div id="app">
        <div  @click="div1">
            <div  @click.capture="div2">
                <div  @click.capture="div3">
                    <div @click="div4">
                        click
                    </div>
                </div>
            </div>
        </div>
    </div>

结果为：div3，div2,div4,div1

<div id="app">
        <div  @click="div1">
            <div  @click.capture="div2">
                <div  @click.stop="div3">
                    <div @click="div4">
                        click
                    </div>
                </div>
            </div>
        </div>
    </div>

结果为：div2,div4,div3

prevent 是拦截默认事件，passive是不拦截默认事件。