vue项目中如何利用v-on实现监听事件

v-on指令实际上是一种事件绑定的简写方式，可以监控DOM事件，比如点击、鼠标悬停、键盘按压等等。下面编程教程网小编给大家简单介绍一下！

VUE监听事件用法

<template>
  <button v-on:click="handleClick">点击事件</button>
</template>
 
<script>
export default {
  methods: {
    handleClick: function (event) {
      // 处理点击事件
    }
  }
}
</script>

VUE阻止事件冒泡

<template>
  <div v-on:click="outer">
    <div v-on:click="inner">
      Click me
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    inner: function (event) {
      event.stopPropagation()
    },
    outer: function () {
      console.log('outer')
    }
  }
}
</script>

VUE阻止默认行为

<template>
  <form v-on:submit.prevent="submit">
    ...
  </form>
  <a href="https://www.google.com" v-on:click.prevent>Google</a>
</template>
 
<script>
export default {
  methods: {
    submit: function () {
      // 阻止表单的提交行为
    }
  }
}
</script>

VUE按键修饰符

<template>
  <input v-on:keyup.enter="submit">
</template>
 
<script>
export default {
  methods: {
    submit: function () {
      // 处理键盘的回车事件
    }
  }
}
</script>