v-on修饰符
修饰符:就是指定事件触发条件,比如按下键盘,监听键盘
stop-调用event.stopPropagation()
.prevent-调用event.preventDefault()
.{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调
.once-只触发一次回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2>{{message}}</h2>
<!-- .stop修饰符的使用-->
<div @click="divClick">
<button @click.stop="btn1Click">按钮1</button>
</div>
<br>
<!-- .prevent修饰符的使用-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<br>
<!-- .监听某个键盘的键帽的点击-->
<!-- keyup.enter 监听回车键-->
<input type="text" @keyup="keyUp">
<br><br>
<!-- .once修饰符的使用-->
<button @click.once="btn2Click">按钮2</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"Hello Ting,I am Key!"
},
methods:{
btn1Click(){
console.log("btn1Click");
},
divClick(){
console.log("divClick");
},
submitClick(){
console.log("submitClick");
},
keyUp(){
console.log("keyUp");
},
btn2Click() {
console.log("btn2Click");
}
}
})
</script>
</body>
</html>