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
凡所有相,皆是虚妄。