vue 绑定事件&事件修饰符

1. 绑定事件

     1.通过v-on或者@来绑定事件

<template>
  <div>
    <h1>{{count}}</h1>
    <button v-on:click="btnClick">按钮</button>
    <!-- 简写方式 -->
    <button @click="btnClick">按钮1</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
        count:1
    }
  },
  methods:{
      btnClick(){
          this.count++;
      }
  },
}
</script>

2. 事件修饰符

  注意：修饰符是可以串联的，同时使用多个修饰符，顺序很重要
    1.prevent：阻止标签默认行为(eg:阻止a链接的点击跳转，form表单的点击提交),下面例子中，点击a链接不发生跳转

<template>
  <div>
     <a href="https://blog.csdn.net/alical" @click.prevent="">跳转</a>
  </div>
</template>

    2.stop：阻止事件冒泡,下面例子中，点击button按钮不会触发其父元素div的点击事件

<template>
  <div>
    <div @click="btn2">
      <button @click.stop="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btn1() {
      console.log('btn1');
    },
    btn2(){
      console.log('btn2');
    }
  },
}
</script>

    3.once：只执行一次，下面例子中，第一次点击button按钮时会执行点击事件，再次点击不会执行

<template>
  <div>
      <button @click.once="btn1">点击</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btn1() {
      console.log('btn1');
    }
  },
}
</script>

    4.capture：使用事件的捕获模式，下面例子中，当点击button时，先触发div的点击事件，再触发button的点击事件

<template>
  <div>
    <div @click.capture="btn2">
      <button @click="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btn1() {
      console.log('btn1');
    },
    btn2() {
      console.log('btn2');
    }
  },
}
</script>

    5.self：只有点击的是元素本身才会触发事件并且会触发事件冒泡，点击button没有触发div的点击事件(没有触发事件冒泡)，点击红色区域，div事件触发

<template>
  <div>
    <div class="test" @click.self="btn2">
      <button @click="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btn1() {
      console.log('btn1');
    },
    btn2() {
      console.log('btn2');
    }
  },
}
</script>
<style scoped>
.test {
   padding: 20px;
   background-color: red
 }
</style>

    6.passive：允许执行默认行为，每次事件发生，浏览器都会询问是否有preventDefault阻止改事件的动作，加上该事件就是告诉浏览器不需要再询问，可以减少页面卡顿。一般用在滚动监听，@scoll 、@touchmove,滚动监听过程中移动每个像素都会产生一次事件，如果每次都查询prevent会造成卡顿，通过该修饰符跳过查询过程使流畅度增加。