<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>运算结果：{{count}}</h1>
<p>--------------------</p>
<button v-on:click="add">+</button>
<button @click="sub">-</button>
<p>--------------------</p>
<button @click="btn1click()">btn1</button>
<button @click="btn2click">btn2</button>
<button @click="btn3click(1,'a',true,msg)">btn3</button>
<button @click="btn4click(1,'a',true,msg,$event)">btn4</button>
<p>--------------------</p>
<!-- 1、阻止冒泡 -->
<div class="box" @click="boxClick">
<button @click.stop="btn5click">btn5</button>
</div>
<p>--------------------</p>
<!-- 2、阻止默认事件 -->
<form action="http://www.baidu.com">
<input type="submit" value="submit" @click.prevent="doSubmit">
</form>
<a href="http://www.baidu.com" @click.prevent="aClick">baidu</a>
<p>--------------------</p>
<!-- 3、响应一次事件 -->
<button @click.once="btn6click">btn6</button>
<p>--------------------</p>
<!-- 4、键盘事件 -->
<input type="text" @keyup="getMsg">
<input type="text" @keyup.enter="getMsg">
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
count: 0
}
},
methods:{
add(){
this.count++;
},
sub(){
this.count--;
},
boxClick(){
console.log("box");
},
btn1click(arg1){
console.log(arg1);//undefined
},
btn2click(arg1){
console.log(arg1);//事件对象
},
btn3click(arg1,arg2,arg3,arg4){
console.log(arg1,arg2,arg3,arg4);
console.log(arguments);
},
btn4click(arg1,arg2,arg3,arg4,event){
console.log(arg1,arg2,arg3,arg4,event);
console.log(arguments);
},
btn5click(event){
// event.stopPropagation();//阻止外层div触发点击事件
console.log("btn5");
},
btn6click(arg1){
console.log("btn6");
},
doSubmit(event){
//阻止默认事件
// event.preventDefault();
console.log("submit");
},
aClick(event){
//阻止默认事件
// event.preventDefault();
console.log("a");
},
getMsg(event){
console.log(event.keyCode);
console.log("input");
console.log(event);
}
}
}).mount('#app');
</script>
</body>
</html>
