Vue 3 - 11 事件绑定

2022-05-08 | 0 浏览

Vue3 事件处理

v-on 指令

语法格式:

v-on:click="method"
@click="method"

1, v-on 示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<button @click="counter += 1"> 加1</button>
		<p>点击次数{{ counter }}</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				counter: 0
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

2，v-on可以支持自定义方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<button @click="collect"> 加1</button>
		<p :style="show">{{ name }}</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				name: "事件",
				show: {
					display: "block"
				}
			}
		},
		methods:{
			collect() {
				console.log(this.name);

				if(this.show.display == "block") {
					this.show.display = "none"
				}else{
					this.show.display = "block"
				}
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

3，其他方法

# 程序中可以有多个方法，这些方法由逗号运算符分隔：
<button @click="one($event), two($event)">

事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

# 按键别名
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right

# 系统修饰键：
.ctrl
.alt
.shift
.meta

# 鼠标按钮修饰符:

.left
.right
.middle

前端