v-on 修饰符

1： vue 中v-on 修饰符：

1.1： 在某一些情况下， 我们拿到event 的目的可能是进行一些事件处理。

vue 修饰符帮助我们提供了一些方法来处理事件：

  .stop --- 调用 event.stopPropagation（）

  .prevent --- 调用event.preeventDefault().

 .navite  ---- 监听组件根元素的原生事件

 .once   ---- 只会触发一次

1.2:  事件冒泡： 点击里边的里边的 button 事件， 事件会冒泡到div 盒子上。  阻止事件冒泡： 

<div id="app">
  <div @click="divaClick">
     aaaaaaa
     // stop 修饰符的使用
     <div>
        <Button @click.stop="btnClick">按钮</Button>
     </div>
  </div>
</div>

<script src="../js/vue.js"> </script>

<script>
  const app = new Vue ({
    el: "#app",
    data: {
       message: "xxx",
    },
    methods: {
      btnClick() {
        console.log("btnClick")
      },
      divClick() {
        divClick.log("divClick")
      }
    }
  })
</script>

点点击此按钮， 只是进行btnClick 点击事件进行操作，完成操作后立即进行stop 操作， 停止后续操作。

2： .prevent  阻止默认事件

3： 监听某个按键修饰符： enter 事件： 

4： .native  事件用在组件中拿到组件的原生事件

应用场景就是： 点击按钮只会触发一次。 比如说： 当前数据只可以添加一条数据， 按钮触发一次，只可以添加一条数据。

应用场景： 点赞功能，  投票功能（只允许投票一次），    防止表单重复提交（允许提交一次）