理解vue事件符中v-on:click.prevent.self和v-on:click.self.prevent

v-on:click.self.prevent 可简写为：@click.self.prevent，只会阻止对元素自身的点击？

v-on:click.prevent.self 可简写为：@click.prevent.self，会阻止所有的点击？

给a链接监听事件加@click.self.prevent

样式：父子关系为：div.grandfather（黄）>div.father（绿）>a链接>div.son（蓝）

1. 点击a链接，输出handleCatch()方法里面的，不弹aler框，   

输出：

2. 点击div.son（蓝），也就是a的子类，输出handleCatch()方法里面的，弹aler框， 

 输出： 

给a链接监听事件加@click.prevent.self

不管是点击a链接，还是点击div.son（蓝），都不弹aler框，   

点击a链接，输出：    点击div.son（蓝），输出：

self和prevent的顺序是有影响的，self不受影响，只有prevent受影响

     1. prevent在后边时，可以理解为“自己阻止” ，

         也就是：点击被prevent修饰的节点时，会阻止默认链接，但点击子类冒泡上来的话就不会阻止了，

        同样的，如果.self.prevent修饰在a链接的父类上，不会阻止子类的默认链接，

     2. prevent在前面时，无论点击谁，都会阻止默认链接，

         同样的，如果.prevent.self修饰在a链接的父类上，仍然会阻止子类的默认链接-->