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

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

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>

vue中如何利用v-on:blur监听失焦事件

标签： v-on事件, v-on指令, vue监听事件

上面是“vue项目中如何利用v-on实现监听事件”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4874.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！