Vue3 v-on 指令
Vue3 内置指令v-on 指令用于绑定事件监听器，可以监听 DOM 事件或自定义事件。
基本说明
v-on 指令用于为元素绑定事件处理函数。可以用它来监听原生 DOM 事件，也可以监听自定义组件发出的事件。
- 简写: @
- 期望类型: Function | Inline Statement | Object
- 作用: 绑定事件监听器，支持原生 DOM 事件和自定义事件。
基本用法
实例
<!-- 完整写法 -->
<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>
<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>
实例
<template>
<div>
<button @click="count++">增加</button>
<p>计数: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
<div>
<button @click="count++">增加</button>
<p>计数: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
事件修饰符
实例
<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">停止冒泡</button>
<!-- 阻止默认行为 -->
<form @submit.prevent="handleSubmit">
<button type="submit">提交</button>
</form>
<!-- 按下回车键触发 -->
<input @keyup.enter="handleEnter" placeholder="按回车提交" />
<button @click.stop="handleClick">停止冒泡</button>
<!-- 阻止默认行为 -->
<form @submit.prevent="handleSubmit">
<button type="submit">提交</button>
</form>
<!-- 按下回车键触发 -->
<input @keyup.enter="handleEnter" placeholder="按回车提交" />