今天我们来学习事件绑定中的事件修饰符，之前好像简单的和大家提到过。这节课我们就来详细了解一下vue中事件修饰符的作用。修饰符是由点开头的指令后缀，在vue中有.stop,.prevent,.capture,.self,.once, .passive 6个修饰符，下面我们来看一下每个修饰符的作用和使用方式，我们来新建一个demo19.html文件，把基础代码复制过来。

.stop阻止冒泡事件

stop是专门用来解决冒泡事件的修饰符，我们来模拟一个事件冒泡。给template中的div内添加一个button 然后分别给div和button绑定上点击响应事件 handelClick1() handelClick2()

methods: {
      handelClick1(){
        alert("点击了1")
      },
      handelClick2(){
        alert("点击了2")
      }
    },
    template: `
      <div @click="handelClick1">
        {{message}}
        <button @click="handelClick2">点我</button>
      </div>
    `    

当父子级都绑定有相同事件时，就会形成冒泡，js会向上传递事件。

stop修饰符

遇到冒泡时，我们只需要绑定事件时加上.stop修饰符就可以了，非常简单。

.prevent阻止默认事件

这个修饰度之前我们有学习过，主要用来阻止一些默认执行的事件，比如我们的form表单的submit 提交事件，我们来快速给大家演示一遍。我们写一个表单 加一个提交按钮，然后给form 的submit提交事件绑定上响应方法。

methods: {
      handelSubmit(){
        alert("触发提交")
      }
    },
    template: `
      <form @submit="handelSubmit">
        <button>提交</button>
      </form>
    `

在浏览器中打开，然后点击提交，这时候会先触发绑定事件弹出alert，然后它有会出自己默认的提交事件 所以页面会刷新一下。

加上.prevent修饰符就能阻止冒泡了比原生写法ev.preventDefault() 简单些没，让我们更佳专注业务逻辑。

template: `
      <form @submit.prevent="handelSubmit">
        <button>提交</button>
      </form>
    `

.capture 事件捕获模式

我们javascript中事件响应机制默认是冒泡模式，以我们刚才冒泡事件为例，它的执行顺序是 先由内到外执行的 ，button => div。使用.capture修饰符后，响应机制就变成了 捕获模式由外到内 div => button。

template: `
      <div @click.capture="handelClick1">
        {{message}}
        <button @click="handelClick2">点我</button>
      </div>
    `

加上.capture之后，打开浏览器我们就发现 它会先执行div的click事件 然后再执行button 的click事件。

.self修饰符

这个修饰符也可以用来解决冒泡，不过它需要给父级来使用，它表示只有点击自己本体的时候才会执行。点它的子级也不会触发它 只有点击它本身才会执行事件响应。

template: `
      <div @click.self="handelClick1">
        {{message}}
        <button @click="handelClick2">点我</button>
      </div>
    `

.once修饰符

这个修饰符简单，它表示只能触发一下事件响应。

template: `
      <div">
        {{message}}
        <button @click.once="handelClick2">点我</button>
      </div>
    `

点击一次之后，它就不再鸟你了。

.passive修饰符

这个修饰符主要跟优化性能有关，不太好给大家演示，也不是很常用。对于优化手势事件比较有用，大家感兴趣的话可以去官网看看它具体解决了一个问题。