事件修饰符

1.事件修饰符
顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

事件修饰符有：

 

 2.阻止冒泡

 当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。

如果想阻止冒泡事件就需用到“.stop”修饰符。

 

 3.阻止默认事件
什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。
这里以a链接为例：

 

加上.prevent修饰符后，a链接不能进行跳转，但是仍然可以触发click事件。

3.事件捕获
还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？

 

 4.只当事件在该元素本身触发时触发回调

我们在父元素div里加了".self"，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符".self"的元素事件。

 

5.事件只触发一次

这里a链接点击事件使用了两个事件修饰符，说明事件修饰符可以并列使用。

 

这里的修饰符".once"的作用是让默认阻止行为(.prevent)只生效一次，所以当我们第一次点击a链接的时候，浏览器控制台会输出"点击了a链接",但是页面不会跳转，当我们再次点击a链接的时候页面会跳转到百度页面，这就是".once"修饰符的作用。
“.prevent"和”.once"的位置调换后，即：@click.once.prevent=“clicklink()”，执行的结果是不一样的。