Vue v-on属性的使用

v-on作用：绑定事件监听器

<template>
  <div>
    <p>{{count}}</p>
    <button v-on:click="count++">按钮1</button><!--直接绑定事件-->
    <button v-on:click="addCount">按钮2</button><!--绑定函数-->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addCount() {
      this.count++
    }
  }
}
</script>

<style>

</style>

传入参数（事件也可作为参数）

<template>
  <div>
    <button v-on:click="handle(1,$event)">按钮</button><!--传递参数-->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handle(x,event) {
      console.log(x);
      console.log(event);
    }
  }
}
</script>

<style>

</style>

 v-on后面可以接的HTML标准事件

click(单击鼠标左键)

dblclick（双击鼠标左键）

contextmenu(单机鼠标右键)

mouseover(指针移到有事件监听的元素或其子元素内)

keydowm（键盘动作:按下任意键）

keyup（键盘动作：释放任意键）

v-on的修饰符

v-on语法糖@（v-on:click=@click）

    <!--停止冒泡-->
    <button @click.stop="handle"></button>
    <!--阻止默认行为-->
    <button @click.prevent="handle"></button>
    <!--组织默认行为，没有表达式-->
    <form @submit.prevent></form>
    <!--串联修饰符-->
    <button @click.stop.prevent="handle"></button>
    <!---->
    <input @keyup.enter="handle"></input>
    <!--键修饰符，键代码-->
    <input @keyup.13="handle">
    <!--点击回调只会触发一次-->
    <button @click.once="handle"></button>